Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Compacting <select> options

Posted by: Ann-Marie Foster May 9 2019, 02:31 AM

We ship to about 65 countries.

The billing country and two shipping country entries are made with the <select> - - - </select> options, about 65 lines each.
All 3 use exactly the same option list.
Is there any way with CSS or ?? to save this list on one place to reduce the size of the code by 130 lines and facilitate edits?

Thanks.


Posted by: Christian J May 9 2019, 04:37 AM

There are several ways to do it, which one is the best depends on how the rest of the page(s) are generated:

- If the HTML pages are created manually, you could simply save the code snippet in a text file and paste it in manually.

- If the pages are generated by a server-side script (e.g. PHP), you might use an inclusion file.

Posted by: Ann-Marie Foster May 9 2019, 09:47 AM

Thanks, Christian.

It is all manually created and two more sets of 65 lines of text copy/pasted in but it just irks me when I see that much repetition in the code. There must be a neater way to do it smile.gif.

You can't call functions in HTML and you can't call a <select> in Javascript sad.gif

Posted by: pandy May 9 2019, 09:53 AM

Don't you have access to PHP or at least SSI so you can use includes?

And you can populate a SELECT with JavaScript. I leave it to Christian to explain how though. biggrin.gif
But I'd go with an include. Much cleaner.

Posted by: Ann-Marie Foster May 9 2019, 10:31 AM

Thanks for the guidance, I'll research "include" options.

Posted by: Christian J May 9 2019, 03:52 PM

QUOTE(pandy @ May 9 2019, 04:53 PM) *

I leave it to Christian to explain how though. biggrin.gif

Good choice. blink.gif

Here's a simple example (one copy):

CODE

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var s1=document.getElementById('s1');
    var s2=document.getElementById('s2');
    s2.innerHTML=s1.innerHTML;
});

</script>
<noscript>The form below doesn't work without javascript enabled.</noscript>

Original:
<select name="s1" id="s1">
<option name="foo1" value="bar1">text</option>
<option name="foo2" value="bar2">text</option>
</select>

Copy:
<select name="s2" id="s2">
</select>

The SELECT elements are given the ID values s1, s2, etc (as many as you want).

QUOTE
But I'd go with an include. Much cleaner.

Yes.

That said, one annoyance is that you may have to change the file extensions from .html to .php. You can also configure the server with a .htaccess directive to use PHP in with .html extension files (if so your webhost support should provide the specific details for your server).

Just make sure the webhost doesn't later break your .htaccess configuration during some future server update. This has happened to me twice lately. Not a big deal if you notice it in time, but in my case both the nav menu and the footer section (with contact info) was included with PHP, so when the web host messed up nobody could even contact the site owner about it. wacko.gif


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)