By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,264 Members | 1,277 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,264 IT Pros & Developers. It's quick & easy.

Why doesn't this work in Firefox?

P: n/a
Here's a simple script to update the contents of one select based on
the user's choice in a second select. It works fine in IE, but not at
all in Firefox. Can anyone shed light on the matter? Thanks.
Brad Smith
<html>
<head>
<title>Interests</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<script Language="JavaScript">
var i;
function AddItem(){
var oOption = document.createElement("OPTION");
oOption.text=document.myForm.SelectInterest.option s[document.myForm.SelectInterest.selectedIndex].text;
oOption.value=document.myForm.SelectInterest.optio ns[document.myForm.SelectInterest.selectedIndex].value;
document.myForm.Interests.add(oOption);
document.myForm.SelectInterest.selectedIndex=0;
}
</script>
<form name="myForm" method="post" action="">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<select name="SelectInterest" onChange="AddItem()">
<option>Please make a selection</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<br>
<br>
<select name="Interests" size="10" >
</select>
</p>
<input name="Clear List" type="button"
onClick="document.myForm.Interests.options.length = 0 " value="Clear
List">
</form>
</body>
</html>

Jan 23 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Just figured it out. IE and Firefox require different argument subsets
for the .add method. This code tries one add method and if there's an
error, tries a backup method. I found the answer on
http://www.webdeveloper.com/forum/ar...p/t-56561.html
--pbs

<script Language="JavaScript">
var i;
function AddItem(){
var oOption = document.createElement("OPTION");
oOption.text=document.myForm.SelectInterest.option s[document.myForm.SelectInterest.selectedIndex].text;
oOption.value=document.myForm.SelectInterest.optio ns[document.myForm.SelectInterest.selectedIndex].value;
addOption(document.myForm.Interests, oOption);
document.myForm.SelectInterest.selectedIndex=0;
}
// Add a new option to a select element
function addOption(selectElement,newOption) {
// First try the DOM2 method ...
try {
selectElement.add(newOption,null);
}
// ... And if that doesn't work use the IE-only method
catch (e) {
selectElement.add(newOption,selectElement.length);
}
}

</script>

Jan 23 '06 #2

P: n/a
pa**************@gmail.com wrote:
Here's a simple script to update the contents of one select based on
the user's choice in a second select. It works fine in IE, but not at
all in Firefox. Can anyone shed light on the matter? Thanks.


You're using IE specific code that Firefox doesn't support.

Jan 23 '06 #3

P: n/a
pa**************@gmail.com wrote:
Just figured it out. IE and Firefox require different argument subsets
for the .add method. This code tries one add method and if there's an
error, tries a backup method. I found the answer on
http://www.webdeveloper.com/forum/ar...p/t-56561.html
--pbs

<script Language="JavaScript">
The language attribute is deprecated, type is required:

<script type="text/javascript">

var i;
function AddItem(){
var oOption = document.createElement("OPTION");
oOption.text=document.myForm.SelectInterest.option s[document.myForm.SelectInterest.selectedIndex].text;
oOption.value=document.myForm.SelectInterest.optio ns[document.myForm.SelectInterest.selectedIndex].value;
You can make these more efficient by getting references and reusing them:

var sel = document.myForm.SelectInterest;
var selOpt = sel.options[sel.selectedIndex];
Now you can get to the text and values as selOpt.text and selOpt.value,
and you have a reference to the select too as 'sel'.

addOption(document.myForm.Interests, oOption);
document.myForm.SelectInterest.selectedIndex=0;
}
// Add a new option to a select element
function addOption(selectElement,newOption) {
// First try the DOM2 method ...
try {
selectElement.add(newOption,null);
}
// ... And if that doesn't work use the IE-only method
catch (e) {
selectElement.add(newOption,selectElement.length);
}
}


No need for that, try..catch is an absolute last resort. Use the DOM 0
new Option:

function AddItem()
{
var sel = document.myForm.SelectInterest;
var selOpt = sel.options[sel.selectedIndex];
sel.options[sel.options.length] = new Option(selOpt.text,
selOpt.value);
sel.selectedIndex=0;
}
Untested but should be OK.
[...]

--
Rob
Jan 23 '06 #4

P: n/a
On 2006-01-23, pa**************@gmail.com <pa**************@gmail.com> wrote:
Just figured it out. IE and Firefox require different argument subsets
for the .add method. This code tries one add method and if there's an
error, tries a backup method. I found the answer on
http://www.webdeveloper.com/forum/ar...p/t-56561.html


:)

I just used the appendChild method it works the same in both.

Bye.
Jasen
Jan 24 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.