使用PHP和MySQL在另一个下拉列表中填充一个下拉列表

时间:2016-02-04 22:06:29

标签: php jquery html ajax mysqli

我有一个下拉列表,它使用mysqli_query()从查询中获取信息 现在,一旦从第一个下拉列表中选择一个选项,我希望第二个下拉列表中填充差异查询中的数据。

这是我的代码

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
    $('.country').on('change', function() {
    // Code to add country information in url
    location.href = location.href.split('?')[0]
        + ['?country', $(this).val()].join('=');
    });
});
</script>

PHP First dropdown:

<?php
    $countries = mysqli_query($mysqli,"select source from nhws.masterkey group by source;");
    echo "<select name='country' style=width:200px>"; 
    echo "<option size =30 ></option>";
    while($row = mysqli_fetch_array($countries)){        
        echo "<option value='".$row['source']."'>".$row['source']."</option>"; 
    }
    echo "</select>";
?>

PHP第二次下拉:

<?php
if (isset($_GET['country'])) {
   $country = $_GET['country'];
   echo $country;
   $variables = mysqli_query($mysqli,"select variable from nhws.num_all_{$country} group by variable;");
   echo "<select name='variable' style=width:200px>"; 
   echo "<option size =30 ></option>";
   while($row = mysqli_fetch_array($variables)) {        
     echo "<option value='".$row['variable']."'>".$row['variable']."</option>"; 
   }
   echo "</select>";
}
?>

现在,一旦从第一个下拉列表中选择了一个选择,第二个下拉列表中就没有任何事情发生。

谢谢!

1 个答案:

答案 0 :(得分:1)

我假设您可以使用jQuery。所以添加一个像这样的jQuery监听器:

<script>
$(document).ready(function() {
    $('.country').on('change', function() {
        // Code to add country information in url
        location.href = location.href.split('?')[0]
            + ['?country', $(this).val()].join('=');
    });
});
</script>

现在在顶部的PHP代码中,在你提到的代码之后添加类似的东西

if (isset($_GET['country']) {
    $country = $_GET['country'];
    // code to prevent SQL injection
    // ... code to get data from DB using country name
    // ... code to print a new select box based on data from DB
}