Simple innerHTML issue

**Stuart Palmer** · Jul 20 '05, 11:18 AM

Re: Simple innerHTML issue

I'm not sure you ammend select objects like this......i.e whether it works
in various browsers.
I'd strip it out and create 'new Option'

Someone else may have a suggestion, but I am not sure this is the right
route for modifying options myself.....I could be wrong.

Stu

"Christophe r Benson-Manica" <ataru@nospam.c yberspace.org> wrote in message
news:bn639g$de9 $1@chessie.cirr .com...[color=blue]
> I'm trying to dynamically change the contents of a select box by doing the
> following...
>
> function myfunc() {
> var obj=document.ge tElementById("o bjname"); // name of the select box
> var str='';
> str+='<option>b lah</option>';
> obj.innerHTML=s tr;
> alert(obj.inner HTML);
> }
>
> For reasons I don't understand, the alert gives me 'blah</option>'. Where[/color]
is[color=blue]
> the leading <option> tag?
>
> --
> Christopher Benson-Manica | I *should* know what I'm talking about - if I
> ataru(at)cybers pace.org | don't, I need to know. Flames welcome.[/color]

**DB McGee** · Jul 20 '05, 11:18 AM

Re: Simple innerHTML issue

This works:

<html>
<head>
<title>Dynamica lly Add Option to a Select Menu</title>
<script type="text/javascript">
function addOption() {
var oSelect = document.getEle mentById( 'myselect' )
nextOptIndex = oSelect.length + 1
newOpt = document.create Element( 'OPTION' );
newOpt.text = "New Option #" + nextOptIndex
newOpt.value = nextOptIndex
oSelect.add( newOpt, nextOptIndex )
}
</script>
</head>
<body>
<h1>Dynamical ly add an option to a select menu</h1>
<select name="myselect" id="myselect">
<option value="default" >choose me</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" value="add" name="add" onClick="addOpt ion()">
</body>
</html>

"Christophe r Benson-Manica" <ataru@nospam.c yberspace.org> wrote in message
news:bn639g$de9 $1@chessie.cirr .com...[color=blue]
> I'm trying to dynamically change the contents of a select box by doing the
> following...
>
> function myfunc() {
> var obj=document.ge tElementById("o bjname"); // name of the select box
> var str='';
> str+='<option>b lah</option>';
> obj.innerHTML=s tr;
> alert(obj.inner HTML);
> }
>
> For reasons I don't understand, the alert gives me 'blah</option>'. Where[/color]
is[color=blue]
> the leading <option> tag?
>
> --
> Christopher Benson-Manica | I *should* know what I'm talking about - if I
> ataru(at)cybers pace.org | don't, I need to know. Flames welcome.[/color]

**Christopher Benson-Manica** · Jul 20 '05, 11:18 AM

Re: Simple innerHTML issue

DB McGee <noreply@norepl y.com> spoke thus:
[color=blue]
> <title>Dynamica lly Add Option to a Select Menu</title>
> (snipped)[/color]

Thanks - I think I'm undestanding why what I had didn't work. The options are
an array and I wasn't treating them like one...

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cybers pace.org | don't, I need to know. Flames welcome.

**Lasse Reichstein Nielsen** · Jul 20 '05, 11:18 AM

Re: Simple innerHTML issue

Christopher Benson-Manica <ataru@nospam.c yberspace.org> writes:
[color=blue]
> I'm trying to dynamically change the contents of a select box by doing the
> following...[/color]

Since you don't say which browser you are using, I'll assume it is
iCab on a Macintosh.

Just kidding, I'll assume it is IE on Windows, since that is what it
usually is when people don't say.

Don't use innerHTML to change the content of a select element in IE.
The content of a select element isn't general HTML, and it won't work
as you expect it to. Using innerHTML adds child nodes to the select
node in the DOM tree, not options to the options collection.

Use
selectRef.add(n ew Option("text"," value"))
instead.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

**Vincent Puglia** · Jul 20 '05, 11:18 AM

Re: Simple innerHTML issue

Hi Stuart,

1) document.getEle mentById is not crossBrowser compatible -- it will
be recognized only by version 5+ browsers.

2) if you want to change a specific option's value/text, the following
is sufficient:

function doit(selObj, ndx)
{
txt = 'a'
selObj.options[ndx].text = txt;
selObj.options[ndx].value = txt;
}

<form name='a'>
<select name="b" onchange="alert (this.options[this.selectedIn dex].value)">
<option value='0'>1</option>
<option value='1'>2</option>
<option value='2'>3</option>
</select>
<input type="button" onclick="doit(t his.form.b, 2)">
</form>

3) if you want to remove an option, you either set that index to null
selObj.options[0] = null
or set the options.length to some number
selObj.options. length = 0;

4) if you wish to append new options, you need to use the new Option()
constructor. see the selection list script/tutorials at my GrassBlade
Javascript site: http://members.aol.com/grassblad

Vinny

[color=blue]
> "Christophe r Benson-Manica" <ataru@nospam.c yberspace.org> wrote in message
> news:bn639g$de9 $1@chessie.cirr .com...[color=green]
> > I'm trying to dynamically change the contents of a select box by doing the
> > following...
> >
> > function myfunc() {
> > var obj=document.ge tElementById("o bjname"); // name of the select box
> > var str='';
> > str+='<option>b lah</option>';
> > obj.innerHTML=s tr;
> > alert(obj.inner HTML);
> > }
> >
> > For reasons I don't understand, the alert gives me 'blah</option>'. Where[/color]
> is[color=green]
> > the leading <option> tag?
> >
> > --
> > Christopher Benson-Manica | I *should* know what I'm talking about - if I
> > ataru(at)cybers pace.org | don't, I need to know. Flames welcome.[/color][/color]

Simple innerHTML issue

Simple innerHTML issue

Comment

Comment

Comment

Comment

Comment