创建3选项动态相关下拉列表

时间:2018-06-05 15:33:18

标签: javascript php jquery html mysql

我有一个关于使用MySQL数据库的小项目。

我想创建一个两个选项下拉菜单。其中每个都包含世界上所有国家/地区的列表,但根据他们选择的选项组合,它们将被发送到我们网站上的其他页面。

由于可能性的数量将会如此之大(200 x 200个国家= 40,000个潜在答案),我们认为最好使用所有这些信息为MySQL数据库播种,然后在我们的网站上提供简单的代码根据他们选择的选项,他们到正确的地方。不幸的是,我们这里没有人有这样的经历,所以我们正在寻找可以帮助我们的人:

1)创建将在我们网站上的HTML和Javascript

2)建立从MySQL数据库到我们网站的连接,以便能够提取值

3)使选中的值指向我们选择的URL

有人能指出我正确的方向如何做到这一点?

谢谢!

1 个答案:

答案 0 :(得分:0)

您可以将此代码用于从属下拉列表。实际上,您不需要在更改事件上做更多简单的事情,您需要获取所选下拉值并在数据库上根据该值从数据库返回数据进行ajax调用然后您可以在另一个下拉列表中附加成功数据,并可以继续此过程以获得更多依赖下拉列表。

<?php
require_once('db.php');
$country_result = $conn->query('select * from countries');
?>

<select name="country" id="countries-list">
        <option value="">Select Country</option>
        <?php
        if ($country_result->num_rows > 0) {
    // output data of each row
    while($row = $country_result->fetch_assoc()) {
        ?>
        <option value="<?php echo $row["id"]; ?>"><?php echo $row["country_name"]; ?></option>
        <?php
    }
}
?>
        </select>
</br></br></br>
        <select name="state" id="states-list">
            <option value=''>Select State</option>
        </select>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
$('#countries-list').on('change', function(){
    var country_id = this.value;
    $.ajax({
    type: "POST",
    url: "get_states.php",
    data:'country_id='+country_id,
    success: function(result){
        $("#states-list").html(result);
    }
    });
});
</script>