I have three select menus - Country, Region and County.
If you select a Country, the Region menu updates. If you then choose a Region, the County menu updates.
I have used a script from GreatASP.co.uk and, after a small amount of fiddling and a large amount of swearing, I have this working in IE but Firefox doesn't even try:
In the original version from GreatASP, the author puts the following line about the function declaration, but I have found that this actually stops the code from working in IE.
// declare new variables for each new div that you add, and link to the div by ID var subcatdiv = document.getElementById("subcat_div");
Obviously, I changed the variable name and div name to suit.
I can see what it's for, in that you have to define the variable before the function calls it - indeed, Firefox warns me in the error console if the above line(s) are not included, but still doesn't work when I put them in. It says regiondiv is not defined.
The DOCTYPE of the HTML file is 4.01 Transitional if that helps at all.
The HTML that calls the function is:
<DIV ID="countrydiv"> <SELECT NAME="Area" onchange="getSelect('Area', this.value,'Region',regiondiv);"> <OPTION>Country1</OPTION> <OPTION>Country2</OPTION> </SELECT> </DIV> <DIV ID="regiondiv"> <SELECT NAME="Area" onChange="getSelect('Area', this.value,'County',countydiv);"> </SELECT> </DIV> <DIV ID="countydiv"> <SELECT NAME="Area"> <OPTION></OPTION> </SELECT> </DIV>
I have tried replacing various parts of the code with getElementById calls but nothing seems to work. The above code is the only variation of dozens that seems to work in IE and I have never got it to do anything in Firefox.
I realise I have 3 SELECTs called Area - this is because the form needs to produce a URL string that groups Country, Region and County together, separated by commas.