I'm trying to change the options of a select element by setting its
innerHTML. Here's a demo case:
<html>
<head>
<script language="javas cript" type="text/javascript">
function addOpts() {
var s = document.getEle mentById("s");
s.innerHTML = '<option>Opt1</option><option> Opt2</option>';
}
window.addEvent Listener('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 4  8628 
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.formNa me.selectName.o ptions[i].text = "select me" (IIRC)
If you want to ADD <options> then:
document.formNa me.selectName.o ptions[0] = new Option("text", "value")
You could create a loop and poplate the Options from an array..
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="javas cript" type="text/javascript">
function addOpts() {
var s = document.getEle mentById("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.create Element('option ') and
appendChild) if you want to create and insert options into a select.
--
Martin Honnen http://JavaScript.FAQTs.com/
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/
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.create Element('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/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<script language="javascript">
|
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
<<<<<<<<<<<<<<CODE>>>>>>>>>>>>>>>>
<html>
|
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 add text,
images, or HTML to the box. This seems to work fine in FireFox, but not
in IE. You can see the problem here:
http://www.publicdomainsoftware.org/ajaxExperiment.htm
In FireFox, if you click in a box and then select "Add HTML" you...
|
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 select a
suggestion and the word will change. All of the functionality works
fine. My problema is in Firefox, if I click on a word to show
sugggestions, and then run the spell check again, and then click on
that same word, the suggestion list does...
|
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 enough to get
the idea).
Here is the code:
-----------------------------------------------------------------
<html>
| | |
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 Firefox. I am using the
following to make the frame editable:
tmp=document.getElementById("adeditor").contentWindow.document
tmp.designMode="On";
|
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
createRows(deviceId,deviceType,modelName,ipAddress,macAddress,imageURL)
|
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 initially there are only 2 select elements in the form namely the ,
subjects and the totalQuestions
when it selects the choice in the totalQuestions dropdown
it calls an onchange function makeAnswere(choice,rowId) which checks if the choice is, ...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| | |
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
