最近在做一个项目,因为用到省市区联动,框架用的是layui框架,就自己写了个方法来实现!
因为很多地方需要使用这个,所以本人就封装了一个函数linkage.js
另外,此处用到一个省市区的js ,area.js 如有需要可以联系qq598194221
//初始加载
function Initial(province,city,area,provinceid){
//js自动加载初始值
//获取省
layui.use('form', function(){
var $= layui.jquery,form = layui.form;
var object = ChineseDistricts['86'];
var proid=$("."+provinceid).val();
//转成数组
parr= proid.split(",");
var html = '';
html += "<option value=''>省份/直辖市</option>";
for (var i in object){
if(i==parr[0]){
html += "<option selected value=" + i + ">" + object[i] + "</option>";
}
else{
html += "<option value=" + i + ">" + object[i] + "</option>";
}
}
$("#"+province).html(html);
//document.getElementById(province).innerHTML = html;
//获取市
//form.on('select('+province+')', function(data){
var valOption = parr[0]; //获取option的value
var object = ChineseDistricts[valOption];
var html = '';
html += "<option value=''>市</option>";
for (var i in object) {
if(i==parr[1]){
html += "<option selected value=" + i + ">" + object[i] + "</option>";
}
else {
html += "<option value=" + i + ">" + object[i] + "</option>";
}
}
//document.getElementById(city).innerHTML = html;
$("#"+city).html(html);
//});
//获取区
// form.on('select('+city+')', function(data){
var valOption = parr[1]; //获取option的value
var object = ChineseDistricts[valOption];
var html = '';
html += "<option value=''>区</option>";
for (var i in object) {
if(i==parr[2]){
html += "<option selected value=" + i + ">" + object[i] + "</option>";
}
else {
html += "<option value=" + i + ">" + object[i] + "</option>";
}
}
//document.getElementById(area).innerHTML = html;
$("#"+area).html(html);
form.render('select');
})
}
//省市区三级联动
function Linkage(province,city,area){
//获取省
var pp=[];
var dd=[];
layui.use('form', function(){
var $= layui.jquery,form = layui.form;
var object = ChineseDistricts['86'];
var html = '';
html += "<option value=''>省份/直辖市</option>";
for (var i in object) {
html += "<option value=" + i + ">" + object[i] + "</option>";
}
document.getElementById(province).innerHTML = html;
//获取市
form.on('select('+province+')', function(data){
var valOption = data.value; //获取option的value
var province_cn = $(this).text();
pp=[];
dd=[];
pp.push(province_cn);
dd.push(valOption);
var object = ChineseDistricts[valOption];
var html = '';
html += "<option value=''>市</option>";
for (var i in object) {
html += "<option value=" + i + ">" + object[i] + "</option>";
}
document.getElementById(city).innerHTML = html;
form.render('select');
});
//获取区
form.on('select('+city+')', function(data){
var valOption = data.value; //获取option的value
var city_cn = $(this).text();
if(pp.length>2) { pp.pop();pp.pop();pp.push(city_cn);}else{pp.push(city_cn);}
if(dd.length>2) { dd.pop();dd.pop();dd.push(valOption);}else{dd.push(valOption);}
var object = ChineseDistricts[valOption];
var html = '';
html += "<option value=''>区</option>";
for (var i in object) {
html += "<option value=" + i + ">" + object[i] + "</option>";
}
document.getElementById(area).innerHTML = html;
form.render('select');
});
//获取区
form.on('select('+area+')', function(data){
var area_cn = $(this).text();
if(pp.length>=3){
pp.pop();
pp.push(area_cn);
}else
{
pp.push(area_cn);
}
if(dd.length>=3)
{ dd.pop();
dd.push(data.value);
}
else
{
dd.push(data.value);
}
$('.'+province+'_cn').val(pp.join("/"));
$('.'+province).val(dd.join());
});
})
}
引入js开始实现
<div class="layui-form-item click_hidden click_hidden2 address_style ">
<label class="layui-form-label">经常居住地</label>
<div class="layui-input-inline">
<select id="province" name="province" lay-filter="province">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" >
<select id="city" name="city" lay-filter="city">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" ><!--style="display: none;"-->
<select id="area" name="area" lay-filter="area">
<option value="">请选择县/区</option>
</select>
</div>
<input type='hidden' class="province" name="contact[place_id]" value="{$row.person_concat.place_id}">
<input type='hidden' class="province_cn" name="contact[place]" value="{$row.person_concat.place}">
<div class="layui-input-4">
<input type="text" name="contact[detai_place]" placeholder="请输入详细地址" class="layui-input" value="{$row.person_concat.detai_place}">
</div>
</div>
<script src="/static/admin/js/linkage.js"></script>
<script>
layui.use(['laydate','layer','form','treeSelect'], function(){
var laydate = layui.laydate,$ = layui.jquery,layer=layui.layer,treeSelect = layui.treeSelect,form = layui.form;
Linkage('province','city','area');//调用联动菜单方法
Initial('province','city','area','province');//初始化加载的方法(编辑时用)
})
这样就实现了,联动效果和再编辑的时候自动选中该值得效果!如下图