Ajax实现点击省份显示相应城市

功能：不用级联效果，自己写ajax，从接口读取省份城市数据，实现点击省份显示相应城市。后端根据省份ID，给前端返回城市。

一、DOM结构(套用blade模板)

<div class="controls bui-form-group-select">
   <div class="control-group span10">
      <label class="control-label"><s>*</s>省份：</label>
      <select name="province_id" id="province" data-rules="{required : true}">
        <option value="">请选择省份</option>
        @if(isset($orderInfo['province_id']))  //编辑时
        @foreach ($aProvinceList['aList'] as $key => $value)
        <option value="{{ $value['iAutoID'] }}" @if( $orderInfo['province_id'] ==$value['iAutoID']) selected @endif>{{ $value['sName'] }}</option>
        @endforeach
        @else                               //添加时
        @foreach ($aProvinceList['aList'] as $key => $value)
        <option value="{{ $value['iAutoID'] }}">{{ $value['sName'] }}</option>
        @endforeach
        @endif
      </select>
   </div>
   <div class="control-group span10">
      <label class="control-label"><s>*</s>城市：</label>
      <select name="city_id" id="city" style="margin-left:10px;" data-rules="{required : true}">
        @if(isset($orderInfo['city_id']))
        <option value="{{$orderInfo['city_id']}}" selected>{{$orderInfo['sCity']}}</option>
        @endif
      </select>
   </div>
</div>

二、触发事件

1.如果用Kissy写，格式如下：

Event.on('#province','change', function() {
  var sPro=S.one('#province').val();
    if(sPro){
      IO({
        url: "{{ url('ajax/chinacity/search') }}",
        type: 'POST',
        data: {
          "province_id" : S.one("#province").val()
        },
        success: function(data){
            S.one("#city").html('<option value="">请选择城市</option>');
            S.each(data.data,function(item,i){
                S.one("#city").append("<option value="+item.iAutoID+">"+item.sName+"</option>");
            });
        }
      });
    }
  });

如果用JQuery写，格式如下：

$('#province').change(function() {
    var sPro = $(this).val();
    if (sPro) {
        $.ajax({
            type: 'POST',
            url: "{{ url('ajax/chinacity/search') }}",
            data: {
                "province_id": sPro
            },
            success: function(data) {
                $("#city").html('<option value="">请选择城市</option>');
                $.each(data.data,
                function(item, i) {
                    $("#city").append("<option value=" + item.iAutoID + ">" + item.sName + "</option>");
                });
            }
        });
    }});

“添加页面”和“编辑页面”往往是同一个页面，区别在于后者有值，在“编辑页面”有之前选好的省份和城市。此时会有一个问题，省份不变，只修改城市，城市下拉列表不出现，必须先选择省份，再重新选择城市。于是添加城市的请求，希望在编辑页可以单独下拉城市列表，然而在控制台会看到请求发送了很多次，需要优化。