<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 particular piece of code functions properly in Internet Explorer and Firefox, but encounters issues in Chrome and Safari. The problem lies in the execution in these browsers. I have experimented with using onChange event on the select tag, but faced challenges as the variables are positioned after the select tag and the SQL query fails to fetch any data for the event trigger. Any suggestions from experienced designers would be greatly appreciated. Thank you!