CODEWITHSUNDEEP
javascripthtmltoggle
Phil
Phil

Reputation: 1927

Toggle the display of options in a Select

I am creating a web page which will have a Select element with a number of Options. Each option represents two values: a code and a human-readable string. I would like to allow the user to toggle a setting (on the same page) which would dynamically toggle the select so that just the code or the human-readable string is visible.

I have thought of a couple of ways of doing this:

  1. When the toggle is pressed, I re-create the page and the appropriate Options are loaded into the Select. This has the disadvantage of clearing all of the other fields on the page.

  2. Having 2 Selects where 1 is always hidden. One Select has options with codes. The other Select has options with human-readable strings. The toggle would hide / show the appropriate Select. This has the disadvantage in that I have to manually keep the 2 Selects in sync.

Also note there will be a number of Selects that need to be toggled on any one page.

Any help greatly appreciated.

Thanks, Phil

Upvotes: 0

Views: 302

Answers (2)

Irishka
Irishka

Reputation: 1136

you can use option title to hold second string and swap it on toggle with option.innerHTML

<option title="human-readable string">short</option>

swap to 

<option title="short">human-readable string</option>

Upvotes: 2

Neq
Neq

Reputation: 66

I say it depends on the datasize your selects will be holding. If it's a big chunk you are better served with a kind of your first idea. Are your selects dynamically growing (like user adding options and so on)? If yes i would go the AJAXian way and do kind of the second idea.

Upvotes: 0

Related Questions