473,326 Members | 2,048 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,326 developers and data experts.

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 7288

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

Similar topics

5
by: Ganco | last post by:
We have a dropdown combobox, where some of the text is wider than the textarea. I cannot set the width of the SELECT any higher due to design restrictions on the company website. When clicking...
13
by: Kai Grossjohann | last post by:
It seems that Ctrl-N in Mozilla opens a new empty browser window. That's fine, I don't need to do anything about it. But Ctrl-N in IE appears to clone the current window. Is there a way to...
0
by: Francis Parsons | last post by:
Hi! I'm doubtful there's a workaround for this problem, but it's worth a shot. I'm using IE's (css) "zoom" property to zoom the body of a document (in conjunction with persistance so the...
4
by: John Fereira | last post by:
So, one of the limitations of multipart-form handling is that when an <input type="file" ..> tag is used it will bring up a window which allows a user to select a file for upload but won't allow...
7
by: sean | last post by:
SELECT drop-list width incorrect for long text when SELECT is fixed width Setting the width style of a SELECT statement causes the contents of the drop-list to be cropped. This is problematic...
0
by: Jeremie | last post by:
I'm working on a page. I've put a select dropdown and a span on the page. When the user selects an option in the dropdown, it performs an async callback to populate the span. The code is simple,...
4
by: =?Utf-8?B?c2lMdmVy?= | last post by:
Hhi, I'm working on an asp .net project that have small side panel which 'disallow' long SELECT/dropdown list.. So i could not force them to a certain that shows my longest option, which now...
9
acoder
by: acoder | last post by:
Don't you just hate it when you've got something working in every browser (that you've tested on) except the XYZ browser? It would be a good idea to document some strange or incorrect behaviours...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.