layui省市区三级联动

最新推荐文章于 2025-07-05 11:12:03 发布

原创

最新推荐文章于 2025-07-05 11:12:03 发布 · 4.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#layui

该博客介绍了如何使用layui-v1.0.4版本结合citys.js插件，实现网页上的省市区三级联动功能，提供了详细的操作步骤和源码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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":["安次区","固安县"