Why doesn't this work in Firefox?

paulbradleysmith · Jan 23, 2006

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.options[document.myForm.SelectInterest.selectedIndex].text;
oOption.value=document.myForm.SelectInterest.options[document.myForm.SelectInterest.selectedIndex].value;
document.myForm.Interests.add(oOption);
document.myForm.SelectInterest.selectedIndex=0;
}
</script>
<form name="myForm" method="post" action="">
<p> </p>
<p> </p>
<p> </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>

paulbradleysmith · Jan 23, 2006

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/archive/index.php/t-56561.html

--pbs

<script Language="JavaScript">
var i;
function AddItem(){
var oOption = document.createElement("OPTION");
oOption.text=document.myForm.SelectInterest.options[document.myForm.SelectInterest.selectedIndex].text;
oOption.value=document.myForm.SelectInterest.options[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>

Tony · Jan 23, 2006

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.

RobG · Jan 23, 2006

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/archive/index.php/t-56561.html

--pbs

<script Language="JavaScript">

The language attribute is deprecated, type is required:

var i;
function AddItem(){
var oOption = document.createElement("OPTION");
oOption.text=document.myForm.SelectInterest.options[document.myForm.SelectInterest.selectedIndex].text;
oOption.value=document.myForm.SelectInterest.options[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.

[...]

How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
I dont get this. Please help me!!	2	Jan 24, 2023
All CRUD operations work except POST. Why?	2	May 28, 2023
Hey can anyone tell me why input data wont save in my database?	0	Jun 16, 2024
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
Why doesn't the function get called?	1	Nov 20, 2023
action_page.php form	2	Oct 25, 2020
When draggable=false & draggable=true dont work ?	1	Jan 14, 2023

Why doesn't this work in Firefox?

paulbradleysmith

paulbradleysmith

Tony

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads