Forum Moderators: open

Message Too Old, No Replies

Select tag options

Listing the options for the <select> tag

         

joshenry

8:48 pm on Jun 23, 2008 (gmt 0)

10+ Year Member


I have a table (in a form) with 13 rows.
The first cell in each row contains an <select> pull down menu with 39 options.
Each of the 13 pull down menus contains the same list of options.

My question: Is there any way to have the data for all the 39 options in one spot and have each of the "select" objects refer to that one bit of information ...instead of having to list it 13 times.

httpwebwitch

12:47 am on Jun 24, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What are you most worried about - maintainability of multiple identical lists, or page size in Kb? Ideally you'll keep your option list in a variable or something, and echo it to the page multiple times. that takes care of the maintainability issue.

as for the page weight in Kb... yes you can lighten the page's load time by omitting repetitive options in each select, though it involves some trickery with Javascript, and the semantically correct way to do it is, indeed, regrettably, having all the options in each select multiple times. That's so the form will still work as intended when javascript is disabled.

When javascript is enabled, you basically keep an array of your options as an object, and inject it into each select, onfocus.

It's not uncommon for an interface to use a modal dialog for choices (for instance, a color picker); these can be loaded via AJAX so they needn't be in the DOM when the page is loaded. Maybe that's an option.

Another option is to totally redesign the interface so it doesn't use a <select> at all, if you can envision a way to do that?

joshenry

2:50 pm on Jun 24, 2008 (gmt 0)

10+ Year Member


Thanks,

re: maintainability, since they're all the same, any changes can be made to one and then cut and pasted to all the others ...not that big a deal in this case, which is only 13 instances.

re: page weight. yeah, it kinda is a lot of extra code, but, again, in this case it's do-able. But it did raise the question, which is why I posted it.

<<...it involves some trickery with Javascript...>>
Just as I thought, there wasn't a simple answer .

<<...and the semantically correct way to do it is, indeed, regrettably, having all the options in each select multiple times...>>
And the suggested approach doesn't really eliminate the need for the repeated listing of the options .

Thanks much for the reply

Joseph