首页 > 技术文章 > js联动

pyspang 2018-09-12 10:06 原文

html:

                    <!-- 省 -->
                    <div class="col-sm-2">
                      <select name="p_id">
                        <option value="">请选择省</option>
                      </select>
                    </div>
                    <!-- 市 -->
                    <div class="col-sm-2">
                      <select name="c_id">
                        <option value="">请选择市</option>
                      </select>
                    </div>
                    <!-- 区 -->
                    <div class="col-sm-2">
                      <select name="a_id">
                        <option value="">请选择地区</option>
                      </select>
                    </div>

JS:

 // 切换地区(getPositions方法是PHP后台获取地区的信息)
 $('select[name=p_id]').change(function () {
  if ($(this).val() == '') {
    $('select[name=c_id]').html('<option value="">请选择市</option>');
    $('select[name=a_id]').html('<option value="">请选择地区</option>');
    return false
  }
  $.post('/store/getPositions', {id: $(this).val()}, function (res) {
    if (res.result) {
      var str = '<option value="">请选择市</option>';
      for (var i in res.data) {
        str += '<option value="' + res.data[i].id + '">' + res.data[i].name + '</option>'
      }
      $('select[name=c_id]').html(str);
      $('select[name=a_id]').html('<option value="">请选择地区</option>');
    }
  }, 'json')
})
$('select[name=c_id]').change(function () {
  if ($(this).val() == '') {
    return false
  }
  $.post('/store/getPositions', {id: $(this).val()}, function (res) {
    if (res.result) {
      var str = '<option value="">请选择地区</option>';
      for (var i in res.data) {
        str += '<option value="' + res.data[i].id + '">' + res.data[i].name + '</option>'
      }
      $('select[name=a_id]').html(str);
    }
  }, 'json')
})

 

推荐阅读