Firefox: set innerHTML of select element?

Michael Schuerig · Jun 17, 2005

I'm trying to change the options of a select element by setting its
innerHTML. Here's a demo case:

<html>
<head>
<script language="javascript" type="text/javascript">
function addOpts() {
var s = document.getElementById("s");
s.innerHTML = '<option>Opt1</option><option>Opt2</option>';
}
window.addEventListener('load', addOpts, false);
</script>
</head>
<body>
<form>
<select id="s">
</select>
</form>
</body>
</html>

In Konqueror this works as intended, the select now has two options,
"Opt1" and "Opt2". In Firefox, unfortunately, the code produces a
TextNode containing "Opt1Opt2" as the only child of the select element.

Is there a way to make Firefox behave as intended? If not, the next best
option is to swap the entire select element. This works, but I'd prefer
to change only the options.

Michael

bmgz · Jun 17, 2005

Michael said:
I'm trying to change the options of a select element by setting its
innerHTML. Here's a demo case:

I don't think that innerHTML will work on a <select>, I have just
managed to change an <option> value by refering to:

document.formName.selectName.options.text = "select me" (IIRC)

If you want to ADD <options> then:

document.formName.selectName.options[0] = new Option("text", "value")

You could create a loop and poplate the Options from an array..

Martin Honnen · Jun 17, 2005

Michael said:
I'm trying to change the options of a select element by setting its
innerHTML. Here's a demo case:

<html>
<head>
<script language="javascript" type="text/javascript">
function addOpts() {
var s = document.getElementById("s");
s.innerHTML = '<option>Opt1</option><option>Opt2</option>';

In Konqueror this works as intended, the select now has two options,
"Opt1" and "Opt2". In Firefox, unfortunately, the code produces a
TextNode containing "Opt1Opt2" as the only child of the select element.

You will not have much luck with that approach, I have just tried such a
test case here on Windows with Mozilla 1.7, IE 6 and Opera 8 and none of
them is properly inserting options into the select, as you have already
found out Mozilla inserts a single text node with the text in the option
elements, and IE is inserting a mess of non option elements and text
nodes while Opera inserts empty option elements interleaved with text nodes.
IE's documentation here for innerHTML does not in any way suggest that
innerHTML should not work on select elements:
<http://msdn.microsoft.com/library/d...thor/dhtml/reference/properties/innerhtml.asp>

In general you will be better off using one of the APIs (e.g. DOM 0 and
new Option() or DOM 2 with document.createElement('option') and
appendChild) if you want to create and insert options into a select.

Martin Honnen · Jun 17, 2005

Martin said:
You will not have much luck with that approach, I have just tried such a
test case here on Windows with Mozilla 1.7, IE 6 and Opera 8 and none of
them is properly inserting options into the select, as you have already
found out Mozilla inserts a single text node with the text in the option
elements,

I was going to file a bug on Mozilla but a test with a recent Mozilla
1.8 nightly shows that the problem has been fixed on the Mozilla trunk.
That of course does not help with existing releases but there is nothing
more you can do about it.

Michael Schuerig · Jun 17, 2005

Martin said:
In general you will be better off using one of the APIs (e.g. DOM 0
and new Option() or DOM 2 with document.createElement('option') and
appendChild) if you want to create and insert options into a select.

That's true, of course. The point of using innerHTML for this is that I
don't call it myself. I'm using Prototype.js
(http://prototype.conio.net/) where innerHTML is set from the
completion function of an XMLHTTPRequest. In general, this is very
convenient. Transmitting data in XML or JavaScript format would be a
lot more trouble. So I'll stick to innerHTML, but instead of the
content of the select, I'll exchange the entire select.

Thanks for your comments.

Michael

Multi select options in a menu	1	Oct 30, 2022
Optgroup causes blank line in Select; Firefox but not IE	4	May 1, 2008
getElementsByTagName select element weirdness	5	Aug 2, 2008
innerHTML with AJAX problem	12	May 9, 2008
Select, Option, innerHTML,Internet Explorer, Firefox, bug	10	Sep 12, 2009
Javascript, Firefox, InnerHTML and AJAX	6	Jul 27, 2007
Scrolling multiple-select, IE vs Firefox	4	Apr 29, 2006
firefox and innerHTML	24	Jul 10, 2005

Firefox: set innerHTML of select element?

Michael Schuerig

bmgz

Martin Honnen

Martin Honnen

Michael Schuerig

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads