ajax实现省市区三级联动

案例：从数据库获取数据实现省市区三级联动，如下图所示

思路：网页初始化时，先获取所有的省份，通过被选中的省份id去获取所有城市，在通过被选中的城市id去加载所有的区县，

当所选的省市的id发生改变时，触发change事件，去加载相应的省市区。

代码如下：

html:

</select>
<select id="s_county" name="s_county" class="county">

                                           </select>
                                       </div>
                                   </div>

扫描二维码关注公众号，回复： 2340353 查看本文章

js:

loadProv();//初始化

//当select标签内容发生改变是触发事件
$(".prov").change(function() {
loadCity();
});
$(".city").change(function() {
loadCounty();
});

//加载省份
function loadProv() {
   $.ajax({
       type: "post",
       url: "http://loaclhost/interface/pc_region/get_pro_list.do",
       dataType: "json",
       async: false, //同步
       success: function(result) {
           var provlist = result.result_info;
           //console.log(citylist);
           var str = ''
           for(var i = 0; i < provlist.length; i++) {
               str += '<option value=' + provlist[i].provinceid + '>' + provlist[i].provincename + '</option>'
           }
           $(".prov").html(str);
           loadCity(); //加载城市
       },
       error: function() {
           console.log("获取省份失败");
       }
   });
}

function loadCity() {
   var prov_id = $(".prov").find("option:selected").val();
   $.ajax({
       type: "post",
       url: "http://loaclhost/interface/pc_region/get_city_list.do",
       data: {
           prov_id: prov_id
       },
       dataType: "json",
       async: true,
       success: function(result) {
           var citylist = result.result_info;
           //console.log(citylist);
           var str = ''
           for(var i = 0; i < citylist.length; i++) {
               str += '<option value=' + citylist[i].cityid + '>' + citylist[i].cityname + '</option>'
           }
           $(".city").html(str);
           loadCounty();

       },
       error: function() {
           console.log("获取城市失败");
       }
   });
}

//加载各区县
function loadCounty() {
   var prov_id = $(".prov").find("option:selected").val();
   var city_id = $(".city").find("option:selected").val();
   $.ajax({
       type: "post",
       url: "http://loaclhost/interface/pc_region/get_county_list.do",
       async: true,
       data: {
           prov_id: prov_id,
           city_id: city_id
       },
       dataType: "json",
       async: true,
       success: function(result) {
           var countylist = result.result_info;
           //console.log(citylist);
           var str = ''
           for(var i = 0; i < countylist.length; i++) {
               str += '<option value=' + countylist[i].countyid + '>' + countylist[i].countyname + '</option>'
           }
           $(".county").html(str);
       },
       error: function() {
           console.log("获取区县失败");
       }
   });
}

后台：

1、获取所有省份：http://loaclhost/interface/pc_region/get_pro_list.do

2、获取所有城市：http://loaclhost/interface/pc_region/get_city_list.do（根据省份id）

3、获取所有区县：http://loaclhost/interface/pc_region/get_county_list.do（根据省份id和城市id）

ajax实现省市区三级联动

猜你喜欢