|add option works in ie not Chrome or Firefox - why?|
| 9:54 am on Sep 27, 2012 (gmt 0)|
I want to dynamically build some selet/option lists and I can but only in Explorer. My testbed below demonstrates the problem.
Can anyone explain this please?
function f_popul8(pselect,pmethod)//add one option to the SELECT; Try various methods
alert(1)// ie, Chrome, Firefox
alert(2);// ie, Chrome, Firefox
ix.options[ix.options.length] = new Option("TEST1"); // Chrome & Firefox drop out here
if (pmethod==2)// Method2
alert(4);// ie, Chrome, Fox
ix.add(oOption);// Chrome & Firefox drop out here
function f_onLoad(pmethod) // swap the order of these calls to try different methods
<SELECT NAME="select2"> </SELECT>
<SELECT NAME="select3"> </SELECT>
| 1:28 pm on Sep 27, 2012 (gmt 0)|
You'll notice from that spec that the options collection is readonly. There is an add method, so you could try:
var opt = document.createElement("option");
opt.value = "TEST";
opt.text = "TEST";
| 2:41 pm on Sep 27, 2012 (gmt 0)|
Thanks for your reply. But....
You astonish me - readonly? Do you mean the Chrome or Firefox spec?
So it is not possible to populate a <select tag with options?
Surely not because it works in IE.
My 'Method 2' uses the add method which works in IE not in others
| 3:17 pm on Sep 27, 2012 (gmt 0)|
w3.org is *the* standard. All browsers should comply.
I guess you need to be reminded that IE isn't standards compliant.
Do NOT use IE as a reference, you'll get bitten constantly.
Note the standard says:
void add(in HTMLElement element, in HTMLElement before)
element of type HTMLElement
The element to add.
before of type HTMLElement
The element to insert before, or null for the tail of the list.
So you need 2 parameters!
AFAIK (some version of) IE choke(s) on this and need only one variable.
So you might need a try catch construction to first try it with the null and then without a second parameter to keep IE happy.
ix.add(opt, null); // standards compliant; doesn't work in IE
ix.add(opt); // IE only
| 3:29 pm on Sep 27, 2012 (gmt 0)|
|Do you mean the Chrome or Firefox spec? |
Neither. That link I posted is the DOM spec.
|So it is not possible to populate a <select tag with options? |
Not, presumably, by directly manipulating the options array, but yes by using the add method.
|Surely not because it works in IE. |
IE often does it's own proprietary things, so you should never use IE as your guide.
I just took a closer look at your code and I see the problem. Your HTML is missing the ID attribute on your SELECT elements. IE (incorrectly) allows the NAME attribute to be used with getElementsById, but the other browsers (correctly) do NOT. So in your code, ix is null when you attempt to access the options array, hence Chrome & Firefox error out.
Once you fix that problem your original code will work (even adding to the select element's options array, even though it's supposed to be treated as readonly), though it's worth noting that your method2 is probably considered the "more correct" way to do it.
| 3:32 pm on Sep 27, 2012 (gmt 0)|
|So you need 2 parameters! |
Nope, if the second one is null, it will just append to the end.
| 3:23 pm on Sep 28, 2012 (gmt 0)|
Fotiman and swa66,
Thanks again..... I'll be back I expect!