根据第一个下拉列表中的选择动态填充3个下拉列表

时间:2016-03-31 17:40:32

标签: javascript php jquery mysql

我有4个下拉菜单。杂志,DD1,DD2,DD3。下拉列表DD1,DD2,DD3需要动态自动填充,并选择杂志下拉列表中的值。下拉列表DD1,DD2,DD3彼此不相关。它们完全取决于杂志下拉列表中的价值。

在选择下拉列表1值时,php ajax必须在mysql上调用。我需要在后台实现3个不同的mysql查询3个下拉菜单。我在网上浏览,所有下拉菜单都与之前的下拉菜单相关。对于Example. 任何人都可以指导我正确的链接或正确的想法来做到这一点。

enter image description here

1 个答案:

答案 0 :(得分:1)

使用javascript onchange的快速解决方法:

形式:

<select name="dd1" id="dd1" class="form-control" onChange="getDD2(this.value);">
        <option value="" selected="selected">-select-</option>
</select>

的javascript:

function getDD2(id){
            if(id==""){
                alert("Please select any dd1!");            
            }else{
            var url = 'getdd2.php?id='+id;
                $('#dd2container').load(url);
            }
        }

和getdd2.php

$id = $_REQUEST['id'];
$dd= "SELECT * FROM prefix_dd2 WHERE id='$id'";
$founddd1 = $dbh->query($dd);
$res = $founddd1->fetchAll();
if(count($res)<=0){
    echo '<select name="dd2" class="form-control" id="dd2">';
            echo '<option value="select">No dd</option>';           
    echo "</select>";   
}else{
    echo '<select name="dd2" class="form-control" id="dd2" onchange="getDD3($id)">';
    echo '<option value="select" selected="selected">-select-</option>';
        foreach($res as $dd2):
            echo '<option value="'.$dd2['id'].'">'.$dd2['dd2_name'].'</option>';
        endforeach;
    echo "</select>";
}

您表单中的DD2选择将是:

<div id="dd2container">
  <select name="dd2" class="form-control">
     <option value="" selected="selected">--select--</option>
  </select>
</div>

现在你可以像我上面的getDD2()一样制作getDD3()函数。我希望这可能有所帮助。

如果你想一次填充三个选择,你可以将所有三个选择框放在getdd2.php中,并根据第一个选择框中的数据查询每个基数据库。