In the article about Custom DropDownList Control with client side data, the javascript will load the drop down list items. The option object has selected property to be set. When I tried it in Internet Explorer (IE), it’s always the item before that is selected.

We visit back the dd_render.js file contains the __genDDData javascript function which used to render the data, as follow:

function __genDDData(comboBoxId, arrayName, showBlankItem, selectedValue)
{
  var codeArray, descArray;
  var opt;
  var cb = document.getElementById(comboBoxId);
  var separator = ''~''; // this is hardcoded for control
  var emptyString = '''';
  try
  {
    eval("codeArray=" + arrayName + "_cd");
    eval("descArray=" + arrayName + "_desc");
  }
  catch (e)
  {
    // skip to generate js droplist
    return;
  }

  if (showBlankItem)
  {
    opt = document.createElement("OPTION");
    opt.text = emptyString;
    opt.value = emptyString + separator;
    cb.options.add(opt);
  }

  if (codeArray != null && codeArray.length != null)
  {
    for (index = 0; index < codeArray.length; index++)
    {
      if (selectedValue != '' && selectedValue == codeArray[index])
      {
        opt = document.createElement("OPTION");
        opt.selected = true;
      }
      else
      {
        opt = document.createElement("OPTION");
      }
      opt.value = codeArray[index] + separator + descArray[index];
      opt.text = descArray[index];
      cb.options.add(opt);
    }
  }
}

I tried the TestPage.aspx in IE 6, the drop down list give me unexpected value.

The first time when the control is loaded in IE.

Try to select some values, and click on the Submit button

The labels display the selected value/text of control in IE.

Note that the value in drop down list control is not selected properly after post back action when it called the __genDDData function.

Compared when I tried the TestPage.aspx in Mozilla Firefox (version 1.5.0.6 that currently I am using), the __genDDData function above worked properly.

The first time when the control is loaded in Firefox.

Try to select some values, and click on the Submit button

The labels display the selected value/text of control in Firefox.

Note that the value in drop down list control is selected properly after post back action when it called the __genDDData function.
To fix the problem in IE, the __genDDData javascript function needs to be modified as below:

function __genDDData(comboBoxId, arrayName, showBlankItem, selectedValue)
{
  var codeArray, descArray;
  var opt;
  var optSelected; // new variable to hold selected option
  var cb = document.getElementById(comboBoxId);
  var separator = ''~''; // this is hardcoded for control
  var emptyString = '''';
  try
  {
    eval("codeArray=" + arrayName + "_cd");
    eval("descArray=" + arrayName + "_desc");
  }
  catch (e)
  {
    // skip to generate js droplist
    return;
  }

  if (showBlankItem)
  {
    opt = document.createElement("OPTION");
    opt.text = emptyString;
    opt.value = emptyString + separator;
    cb.options.add(opt);
  }

  if (codeArray != null && codeArray.length != null)
  {
    for (index = 0; index < codeArray.length; index++)
    {
      if (selectedValue != '' && selectedValue == codeArray[index])
      {
        opt = document.createElement("OPTION");
        opt.selected = true;
        optSelected = opt; // assigned to option object
      }
      else
      {
        opt = document.createElement("OPTION");
      }
      opt.value = codeArray[index] + separator + descArray[index];
      opt.text = descArray[index];
      cb.options.add(opt);
    }
  }
  // assign the index of optSelected to the select object
  if (optSelected != null)
    cb.selectedIndex = optSelected.index;
}

In the modified function, a optSelected variable has been added to hold the selected item. If there is a selected item, the index of it will be assigned to the select object. I tried the TestPage.aspx in IE 6 again, the drop down list give me the correct result.

The first time when the control is loaded in IE.

Try to select some values, and click on the Submit button

The labels display the selected value/text of control in IE.

Note that the value in drop down list control is selected properly after post back action when it called the __genDDData function.
Download the source for this article: HTML DOM Files

Popularity: 8% [?]