retrieving values from selected option to another select - php

Question

I'm trying to write this code to retrieve data from the first Select option to the second Select:
Fist Select:
<select name="league">
<option value="0">------------Please Select League-------</option>
<?php
$sql_league="select * from ".$prev."league";
$re_league=mysql_query($sql_league);
while($d_league=mysql_fetch_array($re_league))
{
?>
<option value="<?=$d_league['id']?>" <?php if($_SESSION['id']==$d_league['id']){?> selected="selected" <?php }?>><?=$d_league['title']?></option>
<?php
}
?>
</select>
Second Select:
<select name="team">
<option value="0">------------Please Select team-------</option>
<?php
$sql_team="select * from ".$prev."team where leagueID=".$d_league['id']."";
$re_team=mysql_query($sql_team);
while($d_team=mysql_fetch_array($re_team))
{
?>
<option value="<?=$d_team['id']?>" <?php if($_SESSION['id']==$d_team['id']){?> selected="selected" <?php }?>><?=$d_team['title']?></option>
<?php
}
?>
</select>
Second Select should depend on the selection from the first Select (If I chose League1, the Second select options should show teams assigned to that league).
any Ideas how to make this work?

Answer 1

try this
<select name="league" onChange="bindSecondSelect()">
<option value="0">select</option>
// your php code
</select>
<select name="team">
// your php code
</select>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
function bindSecondSelect()
{
if($('[name="league"]').val() != "0")
{
$('[name="team"]').find('option').css('display','none');
$('[name="team"]').find('option[value="'+$('[name="league"]').val()+'"]').css('display','block');
}
}
</script>

Answer 2

Send an ajax request to a function with the first select value. This function should get the details of that value and returns the details to the browser. Use that details and append it into the second select.

Answer 3

I have created a little fiddle for you http://jsfiddle.net/TqKG3/3/.
I have used some default values to demonstrate, you will have to use ajax call and return json.
For eg :
$("#opt_leg").change(function () {
$("#opt_mem").find('option').remove();
var url = "your_url.php?league_id=" + $(this).val();
$.get(url, function(data){
var list = jQuery.parseJSON(data);
$.each(list, function (i, item) {
$("#opt_mem").append("<option value=\"" + item.id + "\">" + item.name + "</option>");
});
});
});