Question

<select id='city' name='city' > 
<?php
$dbcon = mysql_connect($host, $username, $password);
mysql_select_db($db_name,$dbcon) or die( "Unable to select database");
$city_query = "SELECT city,county FROM citycatalog order by city asc";
$city_res = mysql_query($city_query);
$city_num = mysql_num_rows($city_res);
$i=0;
while($i < $city_num){
$city_val = mysql_result($city_res,$i,'city');
$county_val = mysql_result($city_res,$i,'county');
echo "<option value=\"$city_val\" onClick=\"document.getElementById('county').value = '$county_val'\" >$city_val</option>";
$i++;
};
?>
</select>
<input type="text" id='county' name='county' />

This code does fire up very fine in IE and FF, but not in Chrome and Safari.
I have no idea how to solve this.
I have tried the alternative with onChange event on the select tag, but, the variables are after the select tag and the SQL does not bring any data to the event.
Please advise a stacked designer.
Thank you!

Answer 1

onclick is not supported for options. You should use onchange of the select. The value can be stored in an attribute like data-county (data- attributes can be used to store data on an element):

<select id='city' name='city' onchange="document.getElementById('county').value = this.options[this.selectedIndex].getAttribute('data-county');"> 
<?php
$dbcon = mysql_connect($host, $username, $password);
mysql_select_db($db_name,$dbcon) or die( "Unable to select database");
$city_query = "SELECT city,county FROM citycatalog order by city asc";
$city_res = mysql_query($city_query);
$city_num = mysql_num_rows($city_res);
$i=0;
while($i < $city_num){
$city_val = mysql_result($city_res,$i,'city');
$county_val = mysql_result($city_res,$i,'county');
echo "<option value=\"$city_val\" data-county=\"$county_val\" >$city_val</option>";
$i++;
};
?>
</select>
<input type="text" id='county' name='county' />