homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
add option works in ie not Chrome or Firefox - why?
bs6600




msg:4500531
 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?

<HTML>
<HEAD>
<SCRIPT type="text/JavaScript">

function f_popul8(pselect,pmethod)//add one option to the SELECT; Try various methods
{
alert(1)// ie, Chrome, Firefox
var ix=document.getElementById(pselect);

if (pmethod==1)//Method1
{
alert(2);// ie, Chrome, Firefox
ix.options[ix.options.length] = new Option("TEST1"); // Chrome & Firefox drop out here
alert(3);
}
else
{
if (pmethod==2)// Method2
{
var oOption=document.createElement("OPTION");
alert(4);// ie, Chrome, Fox
oOption.text="Test2";
oOption.value="T";
ix.add(oOption);// Chrome & Firefox drop out here
alert(5);
}
else//Method 3
{
alert(6);
}
}

}
function f_onLoad(pmethod) // swap the order of these calls to try different methods
{
alert("A");
f_popul8("select1",1);
alert("B");
f_popul8("select2",2);
alert("C");
f_popul8("select3",3);
alert("D");
}
</SCRIPT
</HEAD>
<BODY onLoad="f_onLoad()">

<p>Hello World>/p>
<FORM>
<SELECT NAME="select1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</SELECT>
<SELECT NAME="select2"> </SELECT>
<SELECT NAME="select3"> </SELECT>
</FORM>
</BODY>

</HTML>

 

Fotiman




msg:4500621
 1:28 pm on Sep 27, 2012 (gmt 0)

[w3.org...]

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";
ix.add(opt);

bs6600




msg:4500652
 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

Bill

swa66




msg:4500672
 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.

as in

try {
ix.add(opt, null); // standards compliant; doesn't work in IE
}
catch(ex) {
ix.add(opt); // IE only
}

Fotiman




msg:4500679
 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.

Fotiman




msg:4500682
 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.

bs6600




msg:4501201
 3:23 pm on Sep 28, 2012 (gmt 0)

Fotiman and swa66,

Thank you both for your help - I feel foolish for writing getElementByID and not giving my selects any ID - should have spotted that. This combo of browsers, HTML and Javascript is proving a very hostile arena for me - my 50 years programming in Asssembler, COBOL, Clipper, VFP etc has left me quite unprepared!

Thanks again..... I'll be back I expect!

Bill

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved