Help - Search - Members - Calendar
Full Version: Compacting <select> options
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Ann-Marie Foster
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.

Christian J
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.
Ann-Marie Foster
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
pandy
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.
Ann-Marie Foster
Thanks for the guidance, I'll research "include" options.
Christian J
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

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.