select object manipulation

[robbie.carlton@gmail.com]

Hi.
I need to dynamically update the contents of a select box. I've written
a script which sucessfully achieves this in firefox, but, surprisingly,
it didn't work in internet explorer. When the page runs in explorer I
get a type mismatch error. This is the bit that generates the error

arr is an array of strings, el is a select object.

for(index in arr) {
opt = new Option(arr[index], arr[index]);
el.add(opt, null); // <--- this line
}

Has anyone come across this before? Any help would be great.
Thanks

[Martin Honnen]

Re: select object manipulation



robbie.carlton@ gmail.com wrote:

[color=blue]
> opt = new Option(arr[index], arr[index]);
> el.add(opt, null); // <--- this line[/color]

IE's docs for select and the add method are here:
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/methods/add.asp>
So for IE the second argument to add is optional but if you want to pass
it it should be an integer.

You are probably better off to simply use
el.appendChild( opt);


--

Martin Honnen

http://JavaScript.FAQTs.com/

[Andrew Scott]

Re: select object manipulation

Martin Honnen wrote:[color=blue]
>
>
> robbie.carlton@ gmail.com wrote:
>
>[color=green]
>> opt = new Option(arr[index], arr[index]);
>> el.add(opt, null); // <--- this line[/color]
>
>
> IE's docs for select and the add method are here:
> <http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/methods/add.asp>
>
> So for IE the second argument to add is optional but if you want to pass
> it it should be an integer.
>
> You are probably better off to simply use
> el.appendChild( opt);
>
>[/color]

Hi Robbie

I'd aggree with Martin but I'd also use createElement over new Option().

Like this :

var opt = document.create Element("option ");
opt.value = arr[index];
opt.appendChild ( document.create TextNode(arr[index]) );
el.appendChild( opt );


Hope this helps

Andy

----------------------------------------------------------------------

http://km0ti0n.blunted.co.uk/blog

http://km0ti0n.blunted.co.uk/mozXPath

http://km0ti0n.blunted.co.uk

----------------------------------------------------------------------

[Matt Kruse]

Re: select object manipulation

Andrew Scott wrote:[color=blue]
> I'd aggree with Martin but I'd also use createElement over new
> Option().[/color]

Why?

It takes more code to accomplish the same thing, the code is more confusing,
and it won't work in older browsers where new Option() will.

--
Matt Kruse

http://www.JavascriptToolbox.com

http://www.AjaxToolbox.com

[robbie.carlton@gmail.com]

Re: select object manipulation

Thanks everyone!
I've stopped getting the error.
Using appendChild, however, now although the list is getting
populated, the strings are not being displayed (just blank strings).
I'm not sure why.
I tried to use add without the optional argument, but that broke it in
firefox. So I've ended up using browser sniffing (ugh), to know whether
to put the optional argument into add. If anyone understands why the
string s aren't displaying correctly, I'd appreciate not having to use
browser sniffing.

Thanks again for your help.

robbie

[RobG]

Re: select object manipulation

robbie.carlton@ gmail.com wrote:[color=blue]
> Thanks everyone!
> I've stopped getting the error.
> Using appendChild, however, now although the list is getting
> populated, the strings are not being displayed (just blank strings).
> I'm not sure why.
> I tried to use add without the optional argument, but that broke it in
> firefox. So I've ended up using browser sniffing (ugh), to know whether[/color]

Unnecessary, see below.
[color=blue]
> to put the optional argument into add. If anyone understands why the
> string s aren't displaying correctly, I'd appreciate not having to use
> browser sniffing.[/color]

I have no idea why you get the error, but use of 'add' is not required.
This works for me in Firefox and IE:

<script type="text/javascript">
function addSelects( sel ){
var arr = ['opt1','opt2'];
for(index in arr) {
sel.options[index] = new Option(arr[index], arr[index]);
}
}
</script>
<form action="">
<input type="button" value="Add options" onclick="
addSelects(this .form.aSel);
"><br>
<select id="aSel">
</select>
</form>


If you want to add options to an existing select, then:

...
var arr = ['opt1','opt2'];
for(index in arr) {
sel.options[sel.options.len gth] =
new Option(arr[index], arr[index]);
}



new Option() takes 4 arguments, each is optional:

new Option([text[, value[, defaultSelected[, currentSelected]]]]);



--
Rob