Dynamically filling a select box doesn't work on Mac IE?

Forrest Cahoon

unread,

Dec 26, 2002, 8:54:42 PM12/26/02

to

Here's some code that works correctly on Mozilla and IE/Win 5+:

<html>
<head>
<title>DHTML select test</title>
<script type="text/javascript">
function fillOption()
{
var option1 = document.getElementById("option1");
var text1 = document.createTextNode("option text");
option1.appendChild(text1);
}
</script>
</head>
<body onload="fillOption();">
<select><option id="option1"></option></select>
</body>
</html>

I just discovered that Mac IE 5.1 renders an empty text box with the
option text outside the box to the right (instead of inside the box
where it belongs).

Does anyone know a workaround for this bug? Is there some way I can
dynamically fill a select box which works on all platforms?

Richard Hough

unread,

Dec 31, 2002, 3:48:28 PM12/31/02

to

That's peculiar, I would have though that would work.

However, it's not necessary. The DOM defines the text property of an option
element directly. Do this:

<html>
<head>
<title>DHTML select test</title>
<script type="text/javascript">
function fillOption()
{
var option1 = document.getElementById("option1");

option1.text = "option text";

}
</script>
</head>
<body onload="fillOption();">
<select><option id="option1"></option></select>
</body>
</html>

If you're trying to create a number of option elements programmatically, the
Netscape DOM includes an Option constructor:

<html>
<head>
<title>DHTML Option Test</title>

var select1 = document.getElementById("select1");
select1.add( new Option("Item 1 text", "value1", false, false) );
select1.add( new Option("Item 2 text", "value2", false, false) );
// etc.

}
</script>
</head>
<body onload="fillOption();">

This is much faster, and works on Netscape, IE, and most other browsers.

Forrest Cahoon

unread,

Jan 5, 2003, 12:22:12 PM1/5/03

to

Thanks! This has been very helpful.

As you correctly surmised, I'm trying to fill an entire select box
programmatically.

The solution you gave, using

> var select1 = document.getElementById("select1");
> select1.add( new Option("Item 1 text", "value1", false, false) );

unfortunately didn't work under Mozilla (I'm testing with Moz 1.2.1
under Linux). I changed "select1.add" to "select1.appendChild" and
that worked fine under Mozilla, but failed to render correctly in Win
IE6.

I also tried creating options with option1 =
document.createElement("option") but setting option1.text instead of
appending a text node to it. That also worked fine in Mozilla but was
broken in Win IE6.

After a little more reading, I came up with a solution which works on
both Mozilla and Win IE6, and I had someone test it with Mac IE 5.1.4
on OS X, where it works fine as well!

Here's the magic solution -- I also show how to set which item is
initially selected:

<html>
<head>
<title>DHTML Select Test</title>
<script>
function fill_select()
{
var items = new Array("one", "two", "three", "four", "five");
var selected_item_index = 2; // should select "three"
var i;
var test_select = document.getElementById("test_select");
for (i=0; i<items.length; i++) {
if (i == selected_item_index) {
test_select.options[i] =
new Option(items[i], items[i], true, true);
} else {
test_select.options[i] =
new Option(items[i], items[i], false, false);
}
}
}
</script>
</head>
<body onload="fill_select()">
<p>
This page should contain a select box with the items "one", "two",
"three", "four" and "five". Item "three" should be selected.
</p>
<select id="test_select"></select>
</body>
</html>

Richard Hough

unread,

Jan 6, 2003, 3:03:17 PM1/6/03

to

Note you can replace the code

> if (i == selected_item_index) {
> test_select.options[i] =
> new Option(items[i], items[i], true, true);
> } else {
> test_select.options[i] =
> new Option(items[i], items[i], false, false);
> }

with

var b = (i == selected_item_index);
test_select.options[i] = new Option(items[i], items[i], b, b);

Also, it is usually not a good idea to use the same string for the value and
the child text of an option element.