Javascript 是否选择了第一个选项上的jQuery错误？

我使用

Select2

插件时遇到了奇怪的情况：

当，

#state

更改时，它将执行ajax请求以获取城市的列表。一旦选择了

#城市

，它将执行ajax请求以获取

#区域

列表

如果我选择城市选项2、3等。。。它将触发

#area

以获取列表。但如果我选择第一个选项，就不会发生任何事情

但有一次，我选择了第2、3等选项。。。然后返回选择选项1，它将完美地运行ajax

图1:Badung（选项#1）第一次被选中，没有触发AJAX获取#区域

图2:Bangli（选项#2）被选中，它触发AJAX获取#区域

图3：回到巴东（选项1），现在它触发AJAX获取#区域

以下是我的HTML结构：

<div class="row">
    <div class="col-sm-12">
      <div class="form-group form-group-default form-group-default-select2 required">
        <label class="">State</label>
        <select id="state" class="full-width" data-init-plugin="select2" name="state">
            <option select="selected"></option>

            <?
                for ($i = 0; $i < $num_propinsi; $i++) {
                    $value = $propinsi[$i]['province_id'];
                    $text = $propinsi[$i]['province'];
                    echo '<option value="'.$value.'">'.$text.'</option>';
                }
            ?>

        </select>
      </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
      <div class="form-group form-group-default form-group-default-select2 required">
        <label>City</label>
        <select id="city" class="full-width" data-init-plugin="select2" name="city" disabled>
        </select>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group form-group-default form-group-default-select2 required">
        <label>Area</label>
        <select id="area" class="full-width" data-init-plugin="select2" name="area" disabled>
        </select>
      </div>
    </div>
</div>

陈述
城市
地区

下面是我的jquery：

<script>
    $(function() {

        $("#form-flogin").validate();

        $("#state").change(function() {
            $("#city").html("");
            $("#s2id_city").find("#select2-chosen-2").html("");
            $("#s2id_area").find("#select2-chosen-3").html("");
            $("#area").prop("disabled", true);
            $("#flogin-submit").prop("disabled", true);
            var propinsi = $("#state").val();

            $.ajax({
                url: "controller/ctrl.getcityarea.php?req=city&val="+propinsi,
                dataType: "JSON",
                success: function(json){

                    var city = "";
                    $.each(json, function(i,o){
                        city += "<option value="+o.id+">"+o.city_name+"</option>";
                    });

                    $("#city").append(city);

                    event.preventDefault();             
                    $("#city").prop("disabled", false);
                }
            })
        });

        $("#city").change(function() {
            $("#area").html("");
            $("#s2id_area").find("#select2-chosen-3").html("");
            var city = $("#city").val();

            $.ajax({
                url: "controller/ctrl.getcityarea.php?req=area&val="+city,
                dataType: "JSON",
                success: function(json){

                    var area = "";
                    $.each(json.rajaongkir.results, function(i,o){
                        area += "<option value="+o.subdistrict_id+">"+o.subdistrict_name+"</option>";
                    });

                    $("#area").append(area);

                    event.preventDefault();
                    $("#area").prop("disabled", false);
                }
            });
        });

        $("#area").change(function() {
            event.preventDefault();
            $("#flogin-submit").prop("disabled", false);
        });
    })
</script>

$（函数（）{
$（“#form flogin”）.validate（）；
$（“#状态”）.change（函数（）{
$（“#城市”）.html（“”）；
$（“#s2id_city”）.find（“#select2-selected-2”）.html（“”）；
$（“#s2id_区域”）.find（#select2-selected-3”）.html（“”）；
$（“#面积”）.prop（“禁用”，真）；
$（“#flogin submit”）.prop（“disabled”，true）；
var propinsi=$（“#state”）.val（）；
$.ajax({
url:“controller/ctrl.getcityrea.php？req=city&val=“+propensi，
数据类型：“JSON”，
成功：函数（json）{
var city=“”；
$.each（json，函数（i，o）{
城市+=“”+o.city_name+“”；
});
$（“#城市”）。追加（城市）；
event.preventDefault（）；
$（“#城市”）.prop（“残疾”，假）；
}
})
});
$（“#城市”）.change（function（）{
$（“#面积”）.html（“”）；
$（“#s2id_区域”）.find（#select2-selected-3”）.html（“”）；
var city=$（“#city”）.val（）；
$.ajax({
url:“controller/ctrl.getcityrea.php？req=area&val=“+city，
数据类型：“JSON”，
成功：函数（json）{
var区域=”；
$.each（json.rajaongkir.results，function（i，o）{
面积+=“”+o.分区名称+“”；
});
$（“面积”）。追加（面积）；
event.preventDefault（）；
$（“#面积”）.prop（“禁用”，假）；
}
});
});
$（“#面积”）.更改（函数（）{
event.preventDefault（）；
$（“#flogin submit”）.prop（“disabled”，false）；
});
})

---

知道为什么第一次尝试时

.change

方法不起作用吗？但在下一次尝试中起作用。感谢您的帮助

这是因为您已经为城市编写了一个更改事件侦听器下拉列表，并且默认选择了第一个城市，因此当您再次选择它时，它不会更改值，因此更改事件侦听器不会被触发

您可以执行以下两个选项之一

选项1：将额外选项设置为“选择城市”，然后选择您选择的第一个城市

$("#city").append("<option value=''>Select City</option>");
$("#city").append(city);

---

小字体

此处

选择
应
选择
@伊兹穆克希7：谢谢你的信息，兄弟。但这不是问题的原因。两种选择都有效，兄弟。谢谢。但是我喜欢第二个。因为它没有其他选项可供选择。很高兴帮助您：）
$("#city").append(city).change();