根据第一个 select 的值获取第二个 select 的选项

Question

嗨，我需要一些帮助。

我有 2 个下拉菜单。在第一个中，我选择了一个城市的名称

<select id="select1" class="select" name="city">
<option value="101000000">city1</option>
<option value="102000000">city2</option>
<option value="103000000">city3</option>
</select>

在第二个中，我想每次都动态显示 selected 城市的所有城市

<select id="select2" name="municipality[]" multiple="multiple"></select>

所以为了获取所有城市，我这样做

<script>
    $("#select1").on("change", function() {
        var x = $("#select1").val();

        $.ajax({
            type: "POST",
            url: "fetch_municipalities.php",
            // async: false,
            data:"level1="+x,
            success:function(data){
                // alert(data);

                $("#select2").html(data).multiselect(); 
            },
            error:function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    });
</script>

这是我的fetch_municipalities.php

if(isset($_POST['level1'])) {
    $post_lvl2 =  $_POST['level1'];
    // die($_POST['level1']);
    // echo $_POST['level1'];

    $sql = 'SELECT * FROM L_Areas WHERE CentralAreaID = ' . $post_lvl2;
    $query = mysqli_query($db, $sql);

   $filter_list_lvl2 = '';

    while($row = $query->fetch_assoc()){ 

        $name_lvl2 = $row['AreaName'] ;            
        $id_lvl2 = $row['AreaID'] ;
        $central_lvl2= $row['CentralAreaID'] ;

        // the option tags
        $filter_list_lvl2 .=  '<option value="' . $id_lvl2 . '">' . $name_lvl2 . '</option>';
    } 

    echo $filter_list_lvl2; 
}

所以如果我 select city1 我第一次得到 city1 的所有城市，但是当我 select 另一个城市（例如 city2）时，城市不会改变（仍然来自 city1）。

我该如何解决这个问题？

Answer 1

我想我明白了。而不是：

data:"level1="+x

使用：

data: { level1 : x }

数据必须是对象，不能是字符串。

（另外，使用 var x = $(this).val() 以避免在 DOM 中获取两次 #select1。）

Answer 2

试试这个：

$("#select2").multiselect();

$("#select1").on("change", function() {
        $.ajax({
            type: "POST",
            url: "fetch_municipalities.php",
            data: { level1 : $(this).val() },
            success:function(data){
                $("#select2").html(data).multiselect('refresh'); 
            },
            error:function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    });

根据第一个 select 的值获取第二个 select 的选项

Get the options for second select depending on the value of my fisrt select

php

ajax

jquery

select