Form auto populate 2nd hidden field

Please be kind its my 1st real post!!!!

Im trying to get a form to post to a php page it is all working but i need it to be easier

eg

<select style="width:100;font-weight : bold" name="city1" tabindex=14>
<option value="Portsmouth">Portsmouth</option>
<option value="Poole">Poole</option>
<option value="Cherbourg">Cherbourg</option>
</select>
<select style="width:100;font-weight : bold" name="countryArr"tabindex=8>
<option value="GBR">UK</option>
<option value="FRA">FRANCE</option>
</select>

but i want it to be just one dropdown eg if you select poole or portsmouth it will automaticly select uk but if you select Cherbourg it will select france and the 2nd dropdown is hidden

any ideas???

Sure.

Created a function to split the value of the input (which seperates the country and city names with the "|" character. If the input has no value it skips the function ... if the input has a value it splits the value and shows both seperate values as an alert. This should be straightforward to save directly to hidden form boxes.

Hope this helps !

function auto(val){
var string = new Array();
var country;
var city;
if(val != ""){
string = val.split("|");
country = string[0]
city = string[1]
// I've used an alert here but you could just as easily write to 2 different
// hidden input boxes
alert("The country is: " + country + "\nThe city is " + city)
}
}

<select onChange="auto(this.value)">
<option value=""> Select One </option>
<option value="uk|portsmouth">Portsmouth</option>
<option value="USA|chicago">chicago</option>
</select>