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

时间:2013-06-15 11:27:42

标签: php javascript

我正在尝试编写此代码以从第一个选择选项中检索数据到第二个选择:

拳头选择:

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

Second Select应该取决于第一个选择中的选择(如果我选择了League1,则第二个选择选项应该显示分配给该联盟的球队)。

任何想法如何使这项工作?

3 个答案:

答案 0 :(得分:1)

试试这个

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

答案 1 :(得分:0)

向具有第一个选择值的函数发送ajax请求。此函数应获取该值的详细信息并将详细信息返回给浏览器。使用该详细信息并将其附加到第二个选择中。

答案 2 :(得分:0)

我为你创造了一个小小提琴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>");

        });

   });

});