Hi,
I am pretty new to web development so bare with me. I have a simple problem that I have been trying to solve it for a while now.
I have 2 select boxes in a form that when the first select is changed the 2nd select will populate from an array that is coming from a database. What I actually need is that what is selected from the 1st select box, the 2nd select box will populate with all of the first except the selected (from the 1st). Here is my code. I am almost there since I can see the array in the firebug and now I need to show the array.
function getAirportsFrom(){
$result = mysql_query("SELECT * FROM `tblAirport`");
while($row = mysql_fetch_array($result)) {
echo '<option value="'.$row["AirportID"].'">'.$row["AirportName"].'</option>';
}
}
function getAirportsTo(){
$result = mysql_query("SELECT * FROM `tblAirport`");
$AirportsTo = array();
while($row = mysql_fetch_array($result)) {
if(isset($AirportsTo[$row["AirportID"]])){
$AirportsTo[$row["AirportID"]].='<option value="'.$row["AirportID"].'">'.$row["AirportName"].'</option>';
}else{ // doesn't have a value so set it
$AirportsTo[$row["AirportID"]]='<option value="'.$row["AirportID"].'">'.$row["AirportName"].'</option>';
}
}
return $AirportsTo;
}
?>
<html>
<title>
</title>
<head>
<script type="text/javascript">
var airports=new Array();
<?php
$air=getAirportsTo();
echo "\n";
foreach($air as $airport_id=>$airports){
echo ' airports['.$airport_id.']="'.addslashes($airports).'";'."\n";
}
?>
function changeAirportTo() {
var selectedAirportFrom=document.getElementById("selFrom").value;
if(selectedAirportFrom!="")document.getElementById("selTo").innerHTML='<option value="">Select Airport</option>'+airports[selectedAirportFrom];
}
</script>
</head>
<body>
<li>
From
<select id="selFrom" onChange="changeAirportTo();">
<option value="">Select Airport</option>
<?php
getAirportsFrom();
?>
</select>
To
<select id="selTo">
<option value="">Select Airport</option>
</select>
</li>Your help is much appreciated. Thanks.