从选定选项检索值到另一个选择


retrieving values from selected option to another 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>
第二选择:

<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>

第二次选择应该取决于第一次选择的选择(如果我选择了联赛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>

用第一个select值向函数发送一个ajax请求。该函数应该获取该值的详细信息,并将这些详细信息返回给浏览器。使用该细节并将其附加到第二个select

我已经为您创建了一个小提琴http://jsfiddle.net/TqKG3/3/。

我已经使用了一些默认值来演示,您将不得不使用ajax调用并返回json。

例如:

$("#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>");
        });
   });
});
相关文章: