Javascript does not work in FIREFOX

[rdnobel123]

Hello,

I got stuck on a problem with Javascript in Firefox. It works in IE but not in Firefox.

I have two SELECT lists on my page, one is called “Provincie” and the other “Regio”.
When the Provincie SELECT is changed, the Regio SELECT will display only the Regios which are in the selected Provincie.


To accomplish this I did the following :

- Place 2 SELECT boxes on the page (Provincie and Regio)
- Add an onChange to the Provincie SELECT which refers to a javascript function SubCat()
- The SubCat() javascript empties the Regio SELECT and fills it with the right OPTIONS depending on the selected OPTION in the Provincie SELECT.

The code is actually a lot longer, but because I use a server side script to generate the repeating block (if ( x.value == "<int>" ){ // code }) ,I only posted 3 if blocks which are enough to illustrate how the script works.


The javascript console in Firefox gives me a whole list of the following :

Error : y has no properties
Source : <here it mentions the source file>

Clicking on the link gives me statements like the following :
y.options.length = 0

It also mentions this for the variables :

* temp
* document.getelementbyid(“front_zoek_trefwoord”)

It seems to me that I’m doing something completely wrong but I can’t figure out what.

Does anyone know how to fix this problem ?
I would appreciate any help, as I am totally stuck.


Regards,



Rens de Nobel


THE CODE :

<script type="text/javascript">
function SubCat()
{
	// Get the PROVINCIE SELECT and REGIO SELECT
	// Contents of the REGIO SELECT LIST is dependent on the
  	// selection in the PROVINCIE SELECT LIST

	var x=document.getElementById('front_zoek_provincieID');
	var temp=document.getElementById('front_zoek_regioID');

	// Clear the REGIO SELECT LIST and add the “Alle regios” element
	// to search on all regios

	temp.options.length = 0;
	temp.add(document.createElement('OPTION'));
	temp.options[0].text="Alle regios";
	temp.options[0].value="";							
		
	// If provincieID = 1 then add all regios which belong to this provincie
	// to the REGIO SELECT LIST	
	if ( x.value == "1" )
	{
		var y=document.getElementById('front_zoek_regioID')
		y.options.length = 1	
		y.add(document.createElement('OPTION'))
		y.options[1].text="Drenthe"
		y.options[1].value="14"
								
	};	
				
	if ( x.value == "6" )
	{
		var y=document.getElementById('front_zoek_regioID')
		y.options.length = 1	
		y.add(document.createElement('OPTION'))
		y.options[1].text="Limburg-Zuid"
		y.options[1].value="20"
		y.add(document.createElement('OPTION'))
		y.options[2].text="Limburg-Noord"
		y.options[2].value="21"
	};	
				
	if ( x.value == "7" )
	{
		var y=document.getElementById('front_zoek_regioID')
		y.options.length = 1	
		y.add(document.createElement('OPTION'))
		y.options[1].text="Midden & West Brabant"
		y.options[1].value="23"
						
		y.add(document.createElement('OPTION'))
		y.options[2].text="Brabant Zuid-Oost"
		y.options[2].value="27"
					
		y.add(document.createElement('OPTION'))
		y.options[3].text="Brabant Noord"
		y.options[3].value="28"
	};			
}
</script>


<select style='width:100px;' id="front_zoek_provincieID" onchange="SubCat()" NAME="front_zoek_provincieID">
				
<option value='1'>Drenthe </option>	
<option value='2'>Flevoland </option>	
<option value='3'>Friesland </option>	
<option value='4'>Gelderland </option>	
<option value='5'>Groningen </option>	
<option value='6'>Limburg </option>	
<option value='7'>Noord-Brabant </option>	
<option value='8'>Noord-Holland </option>	
<option value='9'>Overijssel </option>	
<option value='10'>Utrecht </option>	
<option value='11'>Zeeland </option>	
<option value='12'>Zuid-Holland </option>	

</select>


<select  style='width:100px;' id="SubCategorie" NAME="front_zoek_regioID">			
</select>	
		
<script language=javascript>
	SubCat(); // also fill the regio SELECT when loading the page
</script>

 

[elegidito]

Personally, I would go with this method to add options to your select element:

y = document.getElementById("front_zoek_regioID");
newOp = document.createElement("option");
newOp.appendChild(document.createTextNode("test"));
newOp.value = "testVal";
y.appendChild(newOp)

firefox doesn't seem to like the [tt]add[/tt] function, saying there are not enough parameters being passed.

"It is the mark of an educated mind to be able to entertain a thought without accepting it." - Aristotle

 

[rdnobel123]

Ok great, I will try that and reply here with the results.
Thanks !

 

[tsuji]

Or very much straight to the point, like this which works across browser ie, nn & ff.
[tt]
if ( x.value == "1" )
{
var y=document.getElementById('front_zoek_regioID')
y.options.length = 1
var w = new Option();
w.text = "Drenthe";
w.value = "14";
y.options[1] = w;
};
[/tt]
Or if the text and value are not too lengthy,
[tt]
if ( x.value == "1" )
{
var y=document.getElementById('front_zoek_regioID')
y.options.length = 1
y.options[1] = new Option("Drenthe","14");
};
[/tt]
- tsuji

 

[rdnobel123]

Hi Guys,

elegidito : your solution works great, thanks !
tsuji : the javascript console in firefox still gives me errors with your solution.

thanks to you both !

Rens

 

[tsuji]

rdnobel123,

I've no idea why it errs out in firefox. It should do only as good as in ie and nn. If there is no error in ie and nn for a script, it should work equally well in firefox. If you have more precise demo, I am interested in looking into it to see what I myself may have built up a wrong idea of the thing. Thanks for your feedback though.

- tsuji