Is there any way to share <option> tags between different <select> tags?
I have many selects, and all of them have the same exact options. Since I don't want to populate the DOM with too many duplicates, I changed to using an input with a single datalist to share the options, however this both has issues with events (only fires a change event when unfocused, or the client presses enter), and also allows the client to write anything he wants, which really doesn't suit my case.
I don't think you can do that with straight HTML.
You can use JavaScript to populate all your SELECT tags. The OPTION tags will still appear several times in the DOM, but at least you don't be downloading them from the server.
One possible alternative is using HTML list Attribute to identify a list of pre-defined options for single/multiple element to suggest the user.
To reach this goal, you can replace your select with input and link it to a shared datalist included in page:
<input id="replaced_select_1" list="browsers">
<input id="replaced_select_2" list="browsers">
<input id="replaced_select_3" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
An old question, but still worth a reply. In my case, I had a table of potentially hundreds of rows of data, with a select element with potentially hundreds of options. Page load times became too long. My solution was to create 1 select element which is placed over the relevant element when that element gains focus, and focus is then moved to the select element. Result is that the memory footprint is reduced to only one instance of the selection, and only one iteration to populate it. Downside is two user interactions are required to expand the select, one to focus, and another to expand. How to automatically expand html select element in javascript link to ExpandSelect is now defunct. You can find it here https://gist.github.com/adamcoulombe/5390270 but it does seem quite verbose.
As said by zmbq, there doesn't seem to be a way to reuse <option> DOM element inside multiple <select> DOM element.
But you can lighten your DOM, by charging <option> element on the fly when <select> is opened. You can certainly do it manually, but there is also existing js library doing the job, as select2.
