时间戳

首页 > 解决方案 > 创建 3 选项动态依赖下拉列表

javascript - 创建 3 选项动态依赖下拉列表

问题描述

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

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

由于可能性的数量将如此之大（200 x 200 个国家 = 40,000 个潜在答案），我们决定最好在 MySQL 数据库中植入所有这些信息，然后在我们的网站上添加简单的代码，将它们拉到正确的位置取决于他们选择的选项。不幸的是，我们这里没有人有类似的经验，所以我们正在寻找可以帮助我们的人：

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

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

3）使选择的值指向我们选择的URL

谁能指出我如何做到这一点的正确方向？

谢谢！

标签： javascriptphpjqueryhtmlmysql

解决方案

您可以将此代码用于相关下拉列表。实际上，您不需要在更改事件上做更多简单的事情，您需要获取选定下拉列表的值并对数据库进行 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>

推荐阅读