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>

并且在第二个中我想每次动态显示所选城市的所有城市

<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; 
}

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

我该如何解决这个问题？

Answer 1

试试这个：

$("#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);
            }
        });
    });

Answer 2

我想我明白了。而不是：

data:"level1="+x

使用：

data: { level1 : x }

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

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

获取第二个选择的选项，具体取决于我的第一个选择的值

2 个答案: