Country and city chain drop, getElementById bit not working/problem

[JamesPrice]

Hello there, I am trying to send the results of this script to a url (use the elements as the url destination)..
Its basically a simple chain drop box to select country and city then fire a link to the resulting country/city selection. Any help appreciated.

Heres the HTML bit that does not seem to be working - my problem is that the 'city' is not being sent/captured (country is):
-----------------------------
<input name="button" type="button" style="font-size:12px;color:#ffffff;font-family:verdana;background-color:#6666FF;" onClick="window.location.href='/' + document.getElementById('country').value + '/' + document.getElementById('city').value + '/';" value="GO!">
-----------------------------

<script language="javascript">
var countries=new Array();

countries[0]=new Array();
countries[0]['country']='United Kingdom';
countries[0]['cities']=['London','Manchester','Birmingham','Liverpool','Edinburgh','Cardiff','Belfast'];
countries[1]=new Array();
countries[1]['country']='United States';
countries[1]['cities']=['Washington DC','New York','Los Angeles','Chicago'];
countries[2]=new Array();
countries[2]['country']='Australia';
countries[2]['cities']=['Canberra','Melbourne','Sydney','Brisbane'];
countries[3]=new Array();
countries[3]['country']='Japan';
countries[3]['cities']=['Tokyo','Osaka','Fukuoka','Sendai','Sapporo'];

function initBoxes(box1,box2) {
var country=document.getElementById(box1);
var city=document.getElementById(box2);
for (i=0; i<countries.length; i++) {
var x=document.createElement('option');
var y=document.createTextNode(countries[i]['country']);
if (window.attachEvent) { // for IE
x.setAttribute('value',y.nodeValue);
}
x.appendChild(y);
country.appendChild(x);
}

country.onchange=function() {
if(this.value!="") {
var list=document.getElementById(box2);
while (list.childNodes[0]) {
list.removeChild(list.childNodes[0])
}
fillBox2(city,this.value);
}
}

fillBox2(city,country.value);
}

function fillBox2(box2,country) {
for (i=0; i<countries.length; i++) {
if (countries[i]['country']==country) {
var cities=countries[i]['cities'];
}
}
for (i=0; i<cities.length; i++) {
var x=document.createElement('option');
var y=document.createTextNode(cities[i]);
x.appendChild(y);
box2.appendChild(x);
}
}

window.onload=function() {initBoxes('country','city');}
</script>

<p><label>country: <select id="country" name="country">
</select></label></p>
<p>
<label>city:
<select id="city" name="city">
</select>
</label>
</p>
<p>
<input name="button" type="button" style="font-size:12px;color:#ffffff;font-family:verdana;background-color:#6666FF;" onClick="window.location.href='/' + document.getElementById('country').value + '/' + document.getElementById('city').value + '/';" value="GO!">
</form></p>

[Little_G]

Hi,

This code works for me using Firefox, is the problem your having only show up in IE?

Andrew

[JamesPrice]

Yes, thanks for that pointer! Just tested, works in FF and Chrome - wont work in IE, dont know why, any ideas anyone?

[JamesPrice]

Does not work in IE, does not send 'city'. How can this work in IE?

[Little_G]

Hi,

I found a solution, you need to add the line:

x.value = cities[ i ];

to your fillBox2 function, IE seems to need the values set.

Andrew