Javascript - HTML Select element

The HTML select element has been around for a very long time.

However, the technique to generate the option list via javascript is highly browser dependent!

According to the specs - this should be pretty simple .. and it is for everything EXCEPT IE8!

In the main form | Expected results | IE8 is broken | This is what works | Controlling the *values*

In the main form

The main form contains the select component (with one dummy option) and the code necessary to call a library routine to configure it.

This is the associated html - pretty standard.

This is the javascript to call the library function - also pretty straight forward.

Expected results

This routine works in Chrome and Firefox to populate the component. In both Chrome and Firefox, when the down arrow is clicked, 2 options are shown - as expected.

In IE8, the component contains no data!!!

IE8 is broken

The code above fails in IE8. While testing this, I tried every combination of single and double quotes I could think of suspecting that they may be causing the problem. Generically, when the following was used the result for yy was The leading <option value=Red> was always missing unless I added a character in front of it.

However, no matter what I did, I could not get the component to display the options.

These are some of the combinations I tried.

Maybe I'm slow, or I just missed something - but I finally gave up!

You can check this nonsense yourself

On the Locals tab, you can also expand the ComboBox element and locate the innerHTML property - it always matches the yy variable.

This is what works

After the extensive experimentation discussed above, I decided that there was no chance for success and that, in fact, IE8 contains a major design problem. As a result, I tried a totally different solution - this works in both Chrome and IE8. Notice that once an option is added, it can not be reused. Instead, a new option must be created for each array value.

Controlling the *values*

The examples above set the displayed text and the returned values to the same data. This example allow control of the returned values. Code

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / Select.html