Javascript HTML Select element

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!

innerHTML	IE8 method

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.

<select name="UIComboBox" id="UIComboBox" >
  <option value="Algorithms">Algorithms</option>
</select>

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

window.onload = function() {

  var UIComboBox = document.getElementById('UIComboBox'); // *var* required in IE8

  Configure_ComboBox(UIComboBox);
}

Expected results

This routine works in Chrome and Firefox to populate the component.

Configure_ComboBox = function(ComboBox)
{
  // This is typical data
  var xx = "<option value=Red>Red</option> <option value=Green>Green</option>";

  ComboBox.innerHTML = xx; // Works in Chrome, fails in IE8

  var yy = ComboBox.innerHTML ; // just for test
}

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

  var xx = "<option value=Red>Red</option> <option value=Green>Green</option>";

  ComboBox.innerHTML = xx; 
  var yy = ComboBox.innerHTML ;

the result for yy was

Red</option> <option value=Green>Green</option>

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.

  ComboBox.innerHTML = "test";
  var yy = ComboBox.innerHTML ; // yy contained "test"

  var xx = "<option value=Red>Red</option> <option value=Green>Green</option>";
  var ss = ComboBox.innerHTML = xx; // ss was the same as xx
  var yy = ComboBox.innerHTML ;     // yy was missing the first option tag

  var xx = "x<option value=Red>Red</option> <option value=Green>Green</option>";
  var ss = ComboBox.innerHTML = xx; // ss was the same as xx
  var yy = ComboBox.innerHTML ;     // yy was the same as xx, but the options did not display

  var xx = "<option value=2><option value=Red>Red</option> <option value=Green>Green</option>";
  var ss = ComboBox.innerHTML = xx; // ss was the same as xx
  var yy = ComboBox.innerHTML ;     // yy was missing the first 2 option tags

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

You can check this nonsense yourself

From the IE8 menu, select Tools / Developer Tools (F12)
Select the Script tab
Place a breakpoint on the closing curly brace for Configure_ComboBox (click in the margin)
Click the Start Debug button
Tab back the the browser
Press F5 to refresh the page
When the code pauses, click the Locals tab to see the 2 variables
Click the green button - Continue(F5) - or the Stop Debugging button to continue

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.

Configure_ComboBox_IE8 = function(ComboBox)
{
  var xx = ['Red','Green']; // This is just an array

  ComboBox.innerHTML = "" ; // erase the dummy contents

  var option ;
  for (var i = 0; i < xx.length; i++) {
    option = document.createElement("option");
    option.text  = xx[i];
    option.value = xx[i];
    ComboBox.add(option, i);
  }
}

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.

Component	ComboBox.value

Code

function mcExample_setClassOptions(ComboBox)
{
  var optionsClass = [       // This is an array of classes
    {text:'Red',   index:1},
    {text:'Green', index:2}
  ];

  ComboBox.innerHTML = ""; // clear the current (dummy) contents

  var option ;
  for (var i = 0; i < optionsClass.length; i++) {
    option = document.createElement("option");
    option.text  = optionsClass[i].text;
    option.value = optionsClass[i].index;
    ComboBox.add(option, i);
  }
}

function UIComboBox2_Changed(){
  ComboBox2_Result.value = UIComboBox2.value;
}

var UIComboBox2;
var ComboBox2_Result;

window.onload = function() {

  UIComboBox2      = document.getElementById('UIComboBox2');
  ComboBox2_Result = document.getElementById('ComboBox2_Result');

  mcExample_setClassOptions(UIComboBox2);
  UIComboBox2_Changed();
}

Author: Robert Clemenzi