该博客介绍了如何使用layui-v1.0.4版本结合citys.js插件，实现网页上的省市区三级联动功能，提供了详细的操作步骤和源码示例。
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":["安次区","固安县","永清县","香河县","大城县","文安县","大厂回族自治县","霸州市","三河市"]},{"name":"衡水","area":["桃城区","枣强县","武邑县","武强县","饶阳县","安平县","故城县","景县","阜城县","冀州市","深州市"]}]},
{"name":"山西","city":[{"name":"太原","area":["小店区","迎泽区","杏花岭区","尖草坪区","万柏林区","晋源区","清徐县","阳曲县","娄烦县","古交市"]},{"name":"大同","area":["城区","矿区","南郊区","新荣区","阳高县","天镇县","广灵县","灵丘县","浑源县","左云县","大同县"]},{"name":"阳泉","area":["城区","矿区","郊区","平定县","盂县"]},{"name":"长治","area":["城区","郊区","长治县","襄垣县","屯留县","平顺县","黎城县","壶关县","长子县","武乡县","沁县","沁源县","潞城市"]},{"name":"晋城","area":["城区","沁水县","阳城县","陵川县","泽州县","高平市"]},{"name":"朔州","area":["朔城区","平鲁区","山阴县","应县","右玉县","怀仁县"]},{"name":"忻州","area":["忻府区","原平市","定襄县","五台县","代县","繁峙县","宁武县","静乐县","神池县","五寨县","岢岚县","河曲县","保德县","偏关县"]},{"name":"吕梁","area":["离石区","孝义市","汾阳市","文水县","交城县","兴县","临县","柳林县","石楼县","岚县","方山县","中阳县","交口县"]},{"name":"晋中","area":["榆次市","介休市","榆社县","左权县","和顺县","昔阳县","寿阳县","太谷县","祁县","平遥县","灵石县"]},{"name":"临汾","area":["临汾市","侯马市","霍州市","曲沃县","翼城县","襄汾县","洪洞县","古县","安泽县","浮山县","吉县","乡宁县","蒲县","大宁县","永和县","隰县","汾西县"]},{"name":"运城","area":["运城市","永济市","河津市","芮城县","临猗县","万荣县","新绛县","稷山县","闻喜县","夏县","绛县","平陆县","垣曲县"]}]},
{"name":"内蒙古","city":[{"name":"呼和浩特","area":["新城区","回民区","玉泉区","郊区","土默特左旗","托克托县","和林格尔县","清水河县","武川县"]},{"name":"包头","area":["东河区","昆都伦区","青山区","石拐矿区","白云矿区","郊区","土默特右旗","固阳县","达尔罕茂明安联合旗"]},{"name":"乌海","area":["海勃湾区","海南区","乌达区"]},{"name":"赤峰","area":["红山区","元宝山区","松山区","阿鲁科尔沁旗","巴林左旗","巴林右旗","林西县","克什克腾旗","翁牛特旗","喀喇沁旗","宁城县","敖汉旗"]},{"name":"呼伦贝尔","area":["海拉尔市","满洲里市","扎兰屯市","牙克石市","根河市","额尔古纳市","阿荣旗","莫力达瓦达斡尔族自治旗","鄂伦春自治旗","鄂温克族自治旗","新巴尔虎右旗","新巴尔虎左旗","陈巴尔虎旗"]},{"name":"兴安盟","area":["乌兰浩特市","阿尔山市","科尔沁右翼前旗","科尔沁右翼中旗","扎赉特旗","突泉县"]},{"name":"通辽","area":["科尔沁区","霍林郭勒市","科尔沁左翼中旗","科尔沁左翼后旗","开鲁县","库伦旗","奈曼旗","扎鲁特旗"]},{"name":"锡林郭勒盟","area":["二连浩特市","锡林浩特市","阿巴嘎旗","苏尼特左旗","苏尼特右旗","东乌珠穆沁旗","西乌珠穆沁旗","太仆寺旗","镶黄旗","正镶白旗","正蓝旗","多伦县"]},{"name":"乌兰察布盟","area":["集宁市","丰镇市","卓资县","化德县","商都县","兴和县","凉城县","察哈尔右翼前旗","察哈尔右翼中旗","察哈尔右翼后旗","四子王旗"]},{"name":"伊克昭盟","area":["东胜市","达拉特旗","准格
最低0.47元/天 解锁文章
扫一扫
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
