2个数据库相关的下拉菜单

时间:2017-06-27 15:21:13

标签: javascript php mysql

我目前有2个下拉菜单,通过MySQL数据库填充。 我的数据库如下(显然是简化版):

+--------+--------+
|Choice1 | Choice2|
+--------+--------+
| A      | A1     |
| A      | A2     |
| B      | B1     |
| B      | B2     | 
+--------+--------+

用户必须在第一个下拉菜单中选择A和B,第二个将更新(例如:用户在第一个下拉菜单中选择了A,因此第二个下拉菜单将让他在A1之间进行选择和A2)。 我怎样才能做到这一点 ? 提前谢谢!

2 个答案:

答案 0 :(得分:0)

您可以使用Jquery和Ajax来实现。这是一个简单的代码片段,可以实现您的目标。

首先,在index.php中:

<script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">

$(document).ready(function(){
    $(".choice1").change(function(){
        var choice1 = $(this).val();
        var dataString = 'choice1=' + choice1;

        $.ajax({
            type: "POST",
            url: "choice2.php", 
            // You can edit choice2.php for other filename you want
            data: dataString,
            cache: false,
            success: function(html){
                $(".choice2").html(html);
            } 
        });
    });
});
</script>

Choice1 :
<select name="choice1" class="choice1">
    <option selected="selected">--Select Choice1--</option>
    <?php
        include('db.php');

        $sql= "SELECT DISTINCT Choice1 FROM table_test"; 
        // You should edit table_test for your table name

        $result = mysqli_query($con ,$sql);

        while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
            $choice1 = $row['Choice1'];
            echo '<option value="'.$choice1.'">'.$choice1.'</option>';
        } 
    ?>
</select> 
<br/><br/>

Choice2 :
<select name="choice2" class="choice2">
    <option selected="selected">--Select Choice2--</option>
</select>

然后在你的第二个文件里面。我称之为choice2.php:

<?php
include('db.php');
if($_POST['choice1']){
    $choice1 = $_POST['choice1'];
    $sql= "SELECT Choice2 FROM table_test WHERE Choice1='$choice1'";
    $result = mysqli_query($con ,$sql);

    while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
        $choice2 = $row['Choice2'];
        echo '<option value="'.$choice2.'">'.$choice2.'</option>';
    }
}
?>

然后,要连接到数据库,您可以使用此代码段。我把这个文件命名为db.php。

<?php 
$con = mysqli_connect("localhost","root","","database_test"); 
// You should edit database_test with your database name
if (mysqli_connect_errno()){
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
?>

答案 1 :(得分:0)

感谢您的帮助! Best option I found