Connecting Tech Pros Worldwide Forums | Help | Site Map

Browser Bug: Select dropdown element's add() method doesn't work as expected (IE)

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#1   Aug 18 '07
Problem
The select object's add method doesn't append options to the end of the list.

Browser
Internet Explorer

Example
The Javascript code for appending an option element at the end of a select dropdown list:
Expand|Select|Wrap|Line Numbers
  1. var opt = document.createElement("option");
  2. opt.name = "optName";
  3. opt.value = "optValue";
  4. var selObj = document.getElementById("seltest");
  5. selObj.add(opt,null);
Solution
IE does not support the W3C add method, so we have to use a try/catch to use its proprietary method instead:
Expand|Select|Wrap|Line Numbers
  1. var opt = document.createElement("option");
  2. opt.name = "optName";
  3. opt.value = "optValue";
  4. var selObj = document.getElementById("seltest");
  5. try {
  6.  selObj.add(opt,null);
  7. } catch (e) {
  8.    selObj.add(opt); // for IE only
  9.   }
-----------------------------------------------------------------------------------------------------
Problem
The select object's add method doesn't add options to the list. This is similar to the previous problem (appending to the end of the list), but with a slightly different solution.

Browser
Internet Explorer

Example
The Javascript code for adding an option element to a select dropdown list:
Expand|Select|Wrap|Line Numbers
  1. var opt = document.createElement("option");
  2. opt.name = "optName";
  3. opt.value = "optValue";
  4. var selObj = document.getElementById("seltest");
  5. // let's say we want to add before the currently selected option
  6. var optToAddBefore = selObj.options[selObj.selectedIndex];
  7. selObj.add(opt,optToAddBefore);
Solution
IE does not support the W3C add method, so we have to use a try/catch to use its proprietary method instead. For the second argument, instead of the option element, we have to pass the selected index:
Expand|Select|Wrap|Line Numbers
  1. var opt = document.createElement("option");
  2. opt.name = "optName";
  3. opt.value = "optValue";
  4. var selObj = document.getElementById("seltest");
  5. // let's say we want to add before the currently selected option
  6. var optToAddBefore = selObj.options[selObj.selectedIndex];
  7. try {
  8.  selObj.add(opt,optToAddBefore);
  9. } catch (e) {
  10.    selObj.add(opt,selObj.selectedIndex); // for IE only
  11.   }
More Bugs, Quirks and Inconsistencies



Reply