Adding OPTION tags dynamically

[David]

Can anyone give me a quick code snippet (that is standards-based) for adding
OPTION tags to a SELECT dynamically. I have no problem doing it in IE but I
am kind of new to the whole standards world and can't figure out how to make
it work in, for instance, Firefox. Right now the code I am using is as
follows:

newOpt=document.createElement('OPTION');
newOpt.id='optKeyword';
newOpt.label='Keyword';
document.getElementById('slctCategory').add(newOpt);

This code won't work in IE OR Firefox since neither of them operate
according to the standard defined in HTML 4.01 where the label property
should be used as the option contents if it is set. If I change it from
setting the label property to setting the text property, it works in IE, but
not in Firefox. According to HTML 4.01 the text property is supposed to be
read only, thus I would expect that's the reason it doesn't work in Firefox.
Anyways, some help on this would be appreciated!

David

 

[David]

In response to my previous post, I have discovered that I CAN set the text
property in Firefox as well and it works (though I still recall reading that
it is supposed to be a readonly property). Anyways, now my problem is the
following line:

document.getElementById('slctCategory').add(newOpt);

If I use this line in IE, it works fine, but it won't work like this in
Firefox, as it expects a final argument, so if I put it like this it works:

document.getElementById('slctCategory').add(newOpt,null);

I have NO idea why on earth it should expect that final argument,
particularly when it has to be null, but Firefox will not add the new option
otherwise. Anyways, I could obviously use my global "isIE" variable to make
the code branch here but that is something I am trying to avoid. Is there a
different way of going about this all which would be better?

 

[RobG]

In response to my previous post, I have discovered that I CAN set the text
property in Firefox as well and it works (though I still recall reading that
it is supposed to be a readonly property). Anyways, now my problem is the
following line:

document.getElementById('slctCategory').add(newOpt);

If I use this line in IE, it works fine, but it won't work like this in
Firefox, as it expects a final argument, so if I put it like this it works:

document.getElementById('slctCategory').add(newOpt,null);

I have NO idea why on earth it should expect that final argument,
particularly when it has to be null, but Firefox will not add the new option
otherwise. Anyways, I could obviously use my global "isIE" variable to make
the code branch here but that is something I am trying to avoid. Is there a
different way of going about this all which would be better?

If you are adding multiple options, ensure the IDs are unique.

Option elements do not have a 'label' property. Label elements can
contain form controls, but an option element is not a form control, it's
the child of a select (which is a form control). At least that is my
reading of the spec.

The following should suit:

var txt = 'Keyword';
var val = 'Some value';
var newOpt = new Option( txt, val, false, true );
myList.options[myList.options.length] = newOpt;

'txt' is the option text, 'val' the option value and 'false' modifies
the option's selected attribute (true would make the option selected).
The first two parameters are required, the rest can usually be omitted
but it's probably good practice to include them.

I'm not sure it's 100% 'DOM compliant', but the real test is whether it
works reliably in the great majority of browsers without undue
side-effects - I think it meets those criteria.

There is a thread here that may help:

<URL:http://groups-beta.google.com/group...ct+drop+down+IE&rnum=3&hl=en#0a5222cd15fc5e11>

[...]

 

[RobG]

RobG wrote:
[...]

The following should suit:

var txt = 'Keyword';
var val = 'Some value';
var newOpt = new Option( txt, val, false, true );
myList.options[myList.options.length] = newOpt;

'txt' is the option text, 'val' the option value and 'false' modifies
the option's selected attribute (true would make the option selected).
The first two parameters are required, the rest can usually be omitted
but it's probably good practice to include them.

Forgot to add that the last parameter (set to 'true' above) sets whether
the option is the currently selected option.

 

[David]

Thanks to those who helped out, both suggestions worked. Funnily enough, I
knew about, but had ruled out, the newOpt = new Option(....) method because
I believed it to be IE-specific, but I guess I was wrong there. Anyhow, I'm
sure I'll have lots more questions to come as my project goes on.

Thanks again,

David

 

[ASM]

the newOpt = new Option(....) method because
I believed it to be IE-specific

not at all !
it is a very old Javascript way of doing
stil in use ;-)

 

[J. B. Moreno]

Can anyone give me a quick code snippet (that is standards-based) for
adding OPTION tags to a SELECT dynamically. I have no problem doing it
in IE but I am kind of new to the whole standards world and can't figure
out how to make it work in, for instance, Firefox. Right now the code I
am using is as follows:

newOpt=document.createElement('OPTION');
newOpt.id='optKeyword';
newOpt.label='Keyword';
document.getElementById('slctCategory').add(newOpt);

The code I got was from <http://www.mredkj.com/tutorials/tutorial005.html>
and it explained what to use and why....here's my slight tweaking of it to
make it more general:

function addOption(elSel,newText,newValue, elOptOld) {
// have to call createElement for EACH new option
var elOptNew = document.createElement('option');
var newIndex;

elOptNew.text = newText;
elOptNew.value = newValue;

try { // standards compliant method; doesn't work in IE
elSel.add(elOptNew, elOptOld);
} catch(ex) {
if (elOptOld != null) {
newIndex = elOptOld.index+1
} else {
newIndex = elSel.length +1
}
elSel.add(elOptNewm, newIndex); // IE only
}
}

But I have my own problem, related to this (as I just posted in a different
group)...

I'm using one menu to populate another (i.e. teams/players cars/makes that
kind of thing), and I'd like to be able to hide the 2nd menu, and it's
label when the menu is empty.

Hiding the menu is no problem, but I don't know how to find the menu's
label. Any suggestions (other than givign the label an ID, I know that
would work, but would prefer something a more general).

 

[J. B. Moreno]

-snip-

In regards to your question about finding the label, I really don't know
the exact situation but is it possible to use parentNode, childNodes, or
nextSibling properties/collections to access the label relative to each
menu?

Pretty much my question exactly!

Also might try using getElementsByTagName on the parent element of
the menu/label to get a collection of all elements with the label's tag
name within the parent. Then you can use the returned collection and
choose the index within the collection which is the label element. Kinda
hard to be very specific without a look at the HTML structure you are
using but I hope maybe one of these might get you started in the right
direction.

I would like to assume the minimal structure possible....

<form action="something" method="post">
<label for="team">
Teams:
<select name="team" id="team">
<option>Great</option>
</select>
</label>
</form>

 

[J. B. Moreno]

But I have my own problem, related to this (as I just posted in a
different group)...

I'm using one menu to populate another (i.e. teams/players cars/makes
that kind of thing), and I'd like to be able to hide the 2nd menu, and
it's label when the menu is empty.

Hiding the menu is no problem, but I don't know how to find the menu's
label. [...]

In regards to your question about finding the label, I really don't know
the exact situation but is it possible to use parentNode, childNodes, or
nextSibling properties/collections to access the label relative to each
menu?

Thanks, that does it.

<script type="text/javascript">
var oldStyle='none';
function hideTest(menuName) {
var tMenu = document.getElementById(menuName)
var tP = tMenu.parentNode;
var tS;
while (tP.nodeName.toLowerCase() != 'form' &&
tP.nodeName.toLowerCase() != 'label') {
tP = tP.parentNode;
}

if (tP.nodeName.toLowerCase()=="form") { tP = tMenu; }

tS = tP.style.display;
tP.style.display = oldStyle;
oldStyle = tS;
}
</script>