layui省市区三级联动
(都是亲自过测试)需要下载layui-v1.0.4和
citys.js插件,插件可以自己封装,有提供源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="layui-v1.0.4/layui/css/layui.css"/>
</head>
<body>
<fieldset class="layui-elem-field" style="margin: 20px;">
<legend>省市联动</legend>
<div class="layui-field-box">
<form class="layui-form layui-form-pane" action="javascript:;">
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="P1" lay-filter="province">
<option></option>
</select>
</div>
<div class="layui-input-inline">
<select name="C1" lay-filter="city">
<option></option>
</select>
</div>
<div class="layui-input-inline">
<select name="A1" lay-filter="area">
<option></option>
</select>
</div>
</div>
</form>
</div>
</fieldset>
<fieldset class="layui-elem-field" style="margin: 20px;">
<legend>选择结果</legend>
<div class="layui-field-box">
<form class="layui-form" action="javascript:;">
<div class="layui-form-item">
<label class="layui-form-label pca-label-province"></label>
<label class="layui-form-label pca-label-city"></label>
<label class="layui-form-label pca-label-area"></label>
</div>
</form>
</div>
</fieldset>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="layui-v1.0.4/layui/lay/dest/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="js/citys.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
pca.init('select[name=P1]', 'select[name=C1]', 'select[name=A1]', '北京', '北京', '朝阳区');
</script>
</body>
</html>
citys.js
/**
* 时间:2018年11月27日
* 作者:loser
* 说明:依赖与jQuery和layui, 是基于layui开发的一个省市区联动的小插件, 使用上要基于layui的表单进行使用
*/
(function($){
var pca = {};
pca.keys = {};
pca.ckeys = {};
pca.init = function(province, city, area, initprovince, initcity, initarea){//jQuery选择器, 省-市-区
if(!province || !$(province).length) return;
$(province).html('');
$(province).append('<option selected>全部</option>');
for(var i in citys){
$(province).append('<option>'+citys[i].name+'</option>');
pca.keys[citys[i].name] = citys[i];
}
layui.form('select').render();
if(initprovince) $(province).next().find('[lay-value="'+initprovince+'"]').click();
if(!city || !$(city).length) return;
pca.formRender(city);
layui.form().on('select(province)', function(data){
var cs = pca.keys[data.value];
$(city).html('');
$(city).append('<option>全部</option>');
if(cs){
cs = cs.city;
for(var i in cs){
$(city).append('<option>'+cs[i].name+'</option>');
pca.ckeys[cs[i].name] = cs[i];
}
$(city).find('option:eq(1)').attr('selected', true);
}
layui.form('select').render();
$(city).next().find('.layui-this').removeClass('layui-this').click();
pca.formHidden('province', data.value);
$('.pca-label-province').html(data.value);//此处可以自己修改 显示的位置, 不想显示可以直接去掉
});
if(initprovince) $(province).next().find('[lay-value="'+initprovince+'"]').click();
if(initcity) $(city).next().find('[lay-value="'+initcity+'"]').click();
if(!area || !$(area).length) return;
pca.formRender(area);
layui.form().on('select(city)', function(data){
var cs = pca.ckeys[data.value];
$(area).html('');
$(area).append('<option>全部</option>');
if(cs){
cs = cs.area;
for(var i in cs){
$(area).append('<option>'+cs[i]+'</option>');
}
$(area).find('option:eq(1)').attr('selected', true);
}
layui.form('select').render();
$(area).next().find('.layui-this').removeClass('layui-this').click();
pca.formHidden('city', data.value);
$('.pca-label-city').html(data.value); //此处可以自己修改 显示的位置, 不想显示可以直接去掉
});
layui.form().on('select(area)', function(data){
pca.formHidden('area', data.value);
$('.pca-label-area').html(data.value); //此处可以自己修改 显示的位置, 不想显示可以直接去掉
});
if(initprovince) $(province).next().find('[lay-value="'+initprovince+'"]').click();
if(initcity) $(city).next().find('[lay-value="'+initcity+'"]').click();
if(initarea) $(area).next().find('[lay-value="'+initarea+'"]').click();
}
pca.formRender = function(obj){
$(obj).html('');
$(obj).append('<option>全部</option>');
layui.form('select').render();
}
pca.formHidden = function(obj, val){
if(!$('#pca-hide-'+obj).length)
$('body').append('<input id="pca-hide-'+obj+'" type="hidden" value="'+val+'" />');
else
$('#pca-hide-'+obj).val(val);
}
var citys =
[
{"name":"北京","city":[{"name":"北京","area":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","平谷区","怀柔区","密云县","延庆县"]}]},
{"name":"天津","city":[{"name":"天津","area":["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县","蓟县"]}]},
{"name":"河北","city":[{"name":"石家庄","area":["长安区","桥东区","桥西区","新华区","郊区","井陉矿区","井陉县","正定县","栾城县","行唐县","灵寿县","高邑县","深泽县","赞皇县","无极县","平山县","元氏县","赵县","辛集市","藁","晋州市","新乐市","鹿泉市"]},{"name":"唐山","area":["路南区","路北区","古冶区","开平区","新区","丰润县","滦县","滦南县","乐亭县","迁西县","玉田县","唐海县","遵化市","丰南市","迁安市"]},{"name":"秦皇岛","area":["海港区","山海关区","北戴河区","青龙满族自治县","昌黎县","抚宁县","卢龙县"]},{"name":"邯郸","area":["邯山区","丛台区","复兴区","峰峰矿区","邯郸县","临漳县","成安县","大名县","涉县","磁县","肥乡县","永年县","邱县","鸡泽县","广平县","馆陶县","魏县","曲周县","武安市"]},{"name":"邢台","area":["桥东区","桥西区","邢台县","临城县","内丘县","柏乡县","隆尧县","任县","南和县","宁晋县","巨鹿县","新河县","广宗县","平乡县","威县","清河县","临西县","南宫市","沙河市"]},{"name":"保定","area":["新市区","北市区","南市区","满城县","清苑县","涞水县","阜平县","徐水县","定兴县","唐县","高阳县","容城县","涞源县","望都县","安新县","易县","曲阳县","蠡县","顺平县","博野","雄县","涿州市","定州市","安国市","高碑店市"]},{"name":"张家口","area":["桥东区","桥西区","宣化区","下花园区","宣化县","张北县","康保县","沽源县","尚义县","蔚县","阳原县","怀安县","万全县","怀来县","涿鹿县","赤城县","崇礼县"]},{"name":"承德","area":["双桥区","双滦区","鹰手营子矿区","承德县","兴隆县","平泉县","滦平县","隆化县","丰宁满族自治县","宽城满族自治县","围场满族蒙古族自治县"]},{"name":"沧州","area":["新华区","运河区","沧县","青县","东光县","海兴县","盐山县","肃宁县","南皮县","吴桥县","献县","孟村回族自治县","泊头市","任丘市","黄骅市","河间市"]},{"name":"廊坊","area":["安次区","固安县"