Question

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

Answer 1

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>