<div class="layui-clear"> <p id="pck" pid="{$data.province_id}" cid="{$data.city_id}" did="{$data.district_id}"><span>*</span>所在区域 : </p> <p> <select name="province_id" id="province_id"> <option value="">省</option> </select> <select name="city_id" id="city_id"> <option value="">市</option> </select> <select name="district_id" id="district_id"> <option value="">区</option> </select> </p></div>
//js
//省市区 var province = $("#province_id"); var city = $("#city_id"); var count = $("#district_id"); //原有的省市区 var pid = $('#pck').attr('pid'); var cid = $('#pck').attr('cid'); var did = $('#pck').attr('did'); //var chinaArea = JSON.parse(chinaArea);//将字符串格式的json数据转换成对象 //查询是否能修改 $.ajax({ cache: true, type: "POST", url:"/order/order/edit", data:{ ctype:'province', },// 你的formid async: false, dataType:'json', error: function(request) { alert("Connection error"); }, success: function(data) { if (data){ //拼接字符串 var str = ''; $.each( data, function(k, v){ if (v['id'] == pid){ var pck = 'selected="selected"'; }else{ var pck = ''; } str+='<option '+pck+' value='+v['id']+'>'+v['region_name']+'</option>'; }); //alert(str); province.append(str); }else{ layer.msg('服务器连接错误,请联系管理员!') return false; } } }); //1.遍历省份 $("#province_id").change(function () { //选择省份之后,市区跟着变化 cityData(); countData(); }) cityData(); function cityData() { //清除原来的市区信息 city.empty(); //2.遍历市区 $.ajax({ cache: true, type: "POST", url:"/order/order/edit", data:{ ctype:'city', id:province.val(), },// 你的formid async: false, dataType:'json', error: function(request) { alert("Connection error"); }, success: function(data) { if (data){ //拼接字符串 var str = '<option value="">市</option>'; $.each( data, function(k, v){ if (v['id'] == cid){ var cck = 'selected="selected"'; }else{ var cck = ''; } str+='<option '+cck+' value='+v['id']+'>'+v['region_name']+'</option>'; }); //alert(str); city.append(str); }else{ layer.msg('服务器连接错误,请联系管理员!') return false; } } }); } //县区数据填充 $("#city_id").change(function () { //选择省份之后,市区跟着变化 countData(); })countData();function countData() { //清除原来的县区信息 count.empty(); //2.遍历市区 $.ajax({ cache: true, type: "POST", url:"/order/order/edit", data:{ ctype:'count', id:city.val(), },// 你的formid async: false, dataType:'json', error: function(request) { alert("Connection error"); }, success: function(data) { if (data){ //拼接字符串 var str = '<option value="">区</option>'; $.each( data, function(k, v){ if (v['id'] == did){ var dck = 'selected="selected"'; }else{ var dck = ''; } str+='<option '+dck+' value='+v['id']+'>'+v['region_name']+'</option>'; }); //alert(str); count.append(str); }else{ layer.msg('服务器连接错误,请联系管理员!') return false; } } }); } //结束
3级别联动
最新推荐文章于 2021-09-18 10:08:42 发布