Combo Box

not working with firefox...

[JoaoJose]

First of all I must say my knowledge about javascript is almost null so I really apreciate your help.

So here's my problem:

I have a menu with 3 combo boxes which relate to each other.

To populate the boxes I have a database generated array with of this type:

<script type="text/javascript">
var s=new Array();
var combo1=new Array();
var combo2=new Array();

combo1[1]=new Array();
combo1[1][626]=new Option("AIXAM", "626");
combo1[1][1]=new Option("Alfa Romeo", "1");
combo1[1][2]=new Option("Aro", "2");
combo1[1][4]=new Option("Aston Martin", "4");
.
.
.
combo2[3][56][387]=new Option("YN" ,"387");
combo2[3][56][395]=new Option("YP" ,"395");
combo2[3][56][389]=new Option("YQ" ,"389");
combo2[3][56][413]=new Option("YZ" ,"413");
combo2[3][56][513]=new Option("YZ" ,"513");
combo2[3][56][401]=new Option("YZF" ,"401");

##############################
then I have these functions
##############################

function change1() {
temp=document.directsearchform.smarca;
for (m=temp.options.length-1; m>0; m--) {
temp.options[m]=null;
}
i=0;
temp.options[i]=new Option("-- Qualquer marca --", "0");
x=document.directsearchform.mtipo.options.value;
for (z in combo1[x]) {
i++;
temp.options[i]=new Option(combo1[x][z].text, combo1[x][z].value);
}
temp.options[0].selected=true;
if (document.directsearchform.mtipo.options.value==1) { document.directsearchform.motortype.value=1; } if (document.directsearchform.mtipo.options.value==2) { document.directsearchform.motortype.value=2; } if (document.directsearchform.mtipo.options.value==3) { document.directsearchform.motortype.value=3; } }

function change2() {
temp=document.directsearchform.smodelo;
for (m=temp.options.length-1; m>0; m--) {
temp.options[m]=null;
}
i=0;
temp.options[i]=new Option("-- Qualquer modelo --", "0");
x=document.directsearchform.mtipo.options.value;
y=document.directsearchform.smarca.options.value;
for (z in combo2[x][y]) {
i++;
temp.options[i]=new Option(combo2[x][y][z].text, combo2[x][y][z].value);
}
temp.options[0].selected=true;
}

###################################

then I have the form

###################################

<form name="directsearchform" method="GET" action="page.html"><input type="hidden" name="motortype" value="1"><select name="mtipo" size="1" onChange="change1();change2()>.....

######################################

and the options which I don't think is relevant to copy

So what happens with firefox is that by changing combo 1 for example the other boxes don't get populated.

By using firefox's javascript console I get an error on the "for in" loop of the above functions.

On IE and Opera works fine....any ideas?

ps: sorry for the large post :)

[JoaoJose]

Anyone please? :)

[Bernard Marx]

Hello JoaoJose. That looks like a complicated arrangement there:

combo2[3][56][387]=new Option("YN" ,"387");

- sparse 3D arrays assigned to 'ordered' variables (so it's really 4D in nature). I haven't been able to find any place in the code that might upset Firefox in particular. With something of this complexity, it would be easier if there was enough code available to run the application myself so I could see what's happening. Could you post a workable example using a subset of the data?

By using firefox's javascript console I get an error on the "for in" loop of the above functions

..and what does it say?

[JoaoJose]

Hi Bernard.

the error firefox gives me is "undefined has no properties" and then points to the "for in" loop

for (z in combo2[x][y])

I've sent you a sticky with my url so that you can see the box.

Thank's for you help!

[Bernard Marx]

The solution isn't too complicated. The problem lies in the way you are getting the values from the SELECT elements:

x=document.directsearchform.mtipo.[red]options.value[/red]; 

..which FF doesn't support.

Browsers support various ways for doing this (more being added over the years).

Assuming we have:

var [blue]select[/blue] = document.directsearchform.mtipo;

The simplest one is this:

var x = select.value;

However, some older browsers may not support this, so the almost universally used style is this:

var x = select.options[select.selectedIndex].value;

---------

I have stickied you some rationalised code too.

[JoaoJose]

Thank you very much Bernard!

I've tried the code it works perfectly.

I've sent you a sticky too.

Best regards,

Joćo