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

操作2：通过代码触发更改事件

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

是否选择了第一个选项的jQuery Bug？

1 个答案: