javascript - 这是第一个选项上的 jQuery 错误吗？

Question

我在使用 Select2 插件时遇到了奇怪的情况:

当#state改变时，它会做ajax请求来获取#city的列表。选择#city后，它会执行ajax请求以获取#area列表。

如果我选择 #city 选项编号 2、3 等...它将触发 #area 以获取列表。但如果我选择选项 1，则什么都不会发生。

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

图 1:第一次选择 Badung(选项 #1)，未触发 AJAX 获取#area

图2:Bangli(选项#2)被选中，触发AJAX获取#area

图 3:回到 Badung(选项 #1)，现在触发 AJAX 获取#area

这是我的 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>

知道为什么 .change 方法在第一次尝试时不起作用吗？但适用于下一次尝试。谢谢你的帮助

Answer 1

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

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

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

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

方式二:通过代码触发change事件

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