html.<div><!--<span>请选择您所在区/县</span>--><select id="province" name="province" value="省"><option value="">请选择您所在省</option></select><!--<span>请选择您所在区/县</span>--><select id="area" name="area"><option value="">请选择您所在区/县</option></select><!--<span>请选择您所在城市</span>--><select id="city" name="city"><option value="">请选择您所在城市</option></select></div>js.$(function(){//json数据var loadInfo = "city.json";var _data = "";$.getJSON(loadInfo, function(data){_data = data;return _data;});//省============================================$.getJSON(loadInfo, function(data){_data = data;var count = "";$.each(_data,function(i,val){$.each(val,function(i,v){var code = v.code.substr(2,5); //判断是否属于省if(code == "0000"){var obj = "";obj += "<option data-id="+v.code+">"+v.name+"</option>";count += obj;}})});$("#province").append(count);});//省============================================//市$("#province").on("change",function(){var areacount = "";var code = $(this).find("option:selected").attr("data-id");$.each(_data,function(i,val){$.each(val,function(i,v){if(v.code == code){$.each(v.city,function(i,v){var obj = "";obj += "<option data-id="+v.code+">"+v.name+"</option>";areacount += obj;})}else{$("#city").empty();}})});$("#area").empty();$("#area").append(areacount);});//城市$("#area").on("change",function(){var citycount = "";var code = $(this).find("option:selected").attr("data-id");$.each(_data,function(i,val){$.each(val,function(i,v){$.each(v.city,function(i,v){if(v.code == code){$.each(v.area,function(i,v){var obj = "";obj += "<option data-id="+v.code+">"+v.name+"</option>";citycount += obj;})}
})})});$("#city").empty();$("#city").append(citycount);})})
省市区-三级联动(json数据模拟)
最新推荐文章于 2024-04-01 09:49:29 发布