473,396 Members | 1,935 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

Firefox: set innerHTML of select element?


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

--
Michael Schuerig You can twist perceptions
mailto:mi*****@schuerig.de Reality won't budge
http://www.schuerig.de/michael/ --Rush, Show Don't Tell

Jul 23 '05 #1
4 8602
Michael Schuerig wrote:
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[i].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..
Jul 23 '05 #2


Michael Schuerig wrote:
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/default.asp?url=/workshop/author/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
http://JavaScript.FAQTs.com/
Jul 23 '05 #3

Martin Honnen wrote:
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.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #4
Martin Honnen wrote:
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

--
Michael Schuerig The Fifth Rider of the Apocalypse
mailto:mi*****@schuerig.de is a programmer.
http://www.schuerig.de/michael/

Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

24
by: bedhead | last post by:
Why doesn't a SELECT element's innerHTML reflected which option was selected? Works in IE. I need this functionality so that I can retain what choices a user made in a tabbed interface. ...
5
by: Craig Keightley | last post by:
Please help, i have attached my page which worksin IE but i cannnot get the drop down menu to fucntion in firefox. Any one have any ideas why? Many Thanks Craig ...
10
by: Jake Barnes | last post by:
This weekend I wanted to learn AJAX, so I set up a little toy page where I could experiment. The idea of this page is that you click in one of the boxes to get some controls, at which point you can...
1
by: richardsayre | last post by:
I am making a spell checker. The reqest sends out the text and gets back HTML of the suggestions and misspelled words. When you click on a misspelled word the suggestion list pops up and you can...
3
by: patrickkellogg | last post by:
I have this code when you click the buttom is suppose to add a job history. it works with firefox, opera, but not ie. (please note - new entries don't have all the elements in them yet, but...
3
by: Alexander Higgins | last post by:
Hello, I would like to thank everyone for there help in advance. I have form which is using an iframe as a Rich Text Editor. Everything works as expected in IE but I have two issues with...
1
by: raju78.k | last post by:
Hi, I have a problem with FireFox. I have written a function to Add rows without submiting the form. This function works fine in IE, but not in FireFox. The function is : function...
1
omerbutt
by: omerbutt | last post by:
hi i am making a intranet online test application for a school and for that i have to make a form for creating the test the logic is to select a subject and then the number of questions for that test...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.