javascript - 用于编辑信息的 Ajax 国家/地区城市选择

Question

我尝试使用来自

的 API 编辑信息

http://iamrohit.in/lab/php_ajax_country_state_city_dropdown/api.php

这个 api 帮助我首先加载所有国家，并在更改它们时填充相应的州和城市。当我尝试添加新信息并且应该通过交互选择它时，这很好用。

但如果我想编辑该信息，请使用此代码

$('.countries').change().val(editCn);
   $('.states').change().val(editSt);
   $('.cities').change().val(editCt);

国家被选中，但州和城市没有。只有当我再次更改国家/地区并且我必须再次选择它时，它才会被填充。

如果您想查看 api 的代码，现在获取更多信息，

function ajaxCall() {
        this.send = function(data, url, method, success, type) {
          type = type||'json';
          var successRes = function(data) {
              success(data);
          }
          var errorRes = function(e) {
              //alert("Error found \nError Code: "+e.status+" \nError Message: "+e.statusText);
              //$('#loader').modal('hide');
          }
            $.ajax({
                url: url,
                type: method,
                data: data,
                success: successRes,
                error: errorRes,
                dataType: type,
                timeout: 60000
            });

          }

        }

function locationInfo() {
    var rootUrl = "http://iamrohit.in/lab/php_ajax_country_state_city_dropdown/api.php";
    var call = new ajaxCall();
    this.getCities = function(id) {
        $(".cities option:gt(0)").remove();
        var url = rootUrl+'?type=getCities&stateId=' + id;
        var method = "post";
        var data = {};
        $('.cities').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            $('.cities').find("option:eq(0)").html("Select City");
            if(data.tp == 1){
                $.each(data['result'], function(key, val) {
                    var option = $('<option />');
                    option.attr('value', val).text(val);
                     option.attr('cityid', key);
                    $('.cities').append(option);
                });
                $(".cities").prop("disabled",false);
            }
            else{
                 alert(data.msg);
            }
        });
    };
    this.getStates = function(id) {
        $(".states option:gt(0)").remove();
        $(".cities option:gt(0)").remove();
        var url = rootUrl+'?type=getStates&countryId=' + id;
        var method = "post";
        var data = {};
        $('.states').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            $('.states').find("option:eq(0)").html("Select State");
            if(data.tp == 1){
                $.each(data['result'], function(key, val) {
                    var option = $('<option />');
                        option.attr('value', val).text(val);
                        option.attr('stateid', key);
                    $('.states').append(option);
                });
                $(".states").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        });
    };

    this.getCountries = function() {
        var url = rootUrl+'?type=getCountries';
        var method = "post";
        var data = {};
        $('.countries').find("option:eq(1)").html("Please wait..");
        call.send(data, url, method, function(data) {
            $('.countries').find("option:eq(0)").html("Select Country");
            console.log(data);
            if(data.tp == 1){
                $.each(data['result'], function(key, val) {
                    var option = $('<option />');
                    option.attr('value', val).text(val);
                     option.attr('countryid', key);
                    $('.countries').append(option);
                });
                $(".countries").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        });
    };

}

$(function() {
var loc = new locationInfo();
loc.getCountries();
 $(".countries").on("change", function(ev) {
        var countryId = $("option:selected", this).attr('countryid');
        if(countryId != ''){
        loc.getStates(countryId);
        }
        else{
            $(".states option:gt(0)").remove();
        }
    });
 $(".states").on("change", function(ev) {
        var stateId = $("option:selected", this).attr('stateid');
        if(stateId != ''){
        loc.getCities(stateId);
        }
        else{
            $(".cities option:gt(0)").remove();
        }
    });
});

这个问题的任何答案都会对我有很大帮助。试了很多方法都没用。

Answer 1

看起来这是个小错误。假设我有这个

<select onchange="alert(this.value)">
  <option value="a">1</option>
  <option value="b">2</option>
  <option value="c">3</option>
</select>

现在如果你运行 $('select').change().val("b"); 它会 alert("a") 这是因为只有在更改事件得到处理后才会更改值，因为您已分配 ajax 代码以在更改事件上运行，该事件将使用旧值导致选择框内容没有可见变化

稍后调用更改会修复它

$('.countries').val(editCn).change();
$('.states').val(editSt).change();
$('.cities').val(editCt).change();