469,888 Members | 1,236 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Share your developer knowledge by writing an article on Bytes.

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

acoder
16,027 Expert Mod 8TB
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
Aug 18 '07 #1
0 6964

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Ganco | last post: by
13 posts views Thread by Kai Grossjohann | last post: by
reply views Thread by Francis Parsons | last post: by
4 posts views Thread by John Fereira | last post: by
7 posts views Thread by sean | last post: by
reply views Thread by Jeremie | last post: by
4 posts views Thread by =?Utf-8?B?c2lMdmVy?= | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.