二级和三级城市插件

于 2024-05-14 14:48:39 发布
阅读量86 收藏
点赞数
分类专栏： 前端最新面试题以及日常实用插件 文章标签： javascript 城市选择
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MingL520/article/details/138854970
版权
这篇博客介绍了如何使用jQuery实现二级和三级城市的选择功能。对于二级城市插件，它包括引入jQuery库，HTML结构设置，以及 ProvinceAndCity.js 的引入和JS调用来实现功能。而三级城市插件则涉及引入jQuery，HTML布局，引入JS文件以及绑定JS操作来完成。
摘要由CSDN通过智能技术生成

二级城市插件

1.首先引入jquery

<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

2.html

<body>
	
    <select id="province">
    </select>
    <select id="city">
    </select>
    <input type="hidden" id="hidpro" value="请选择省" />
    <input type="hidden" id="hidcity" value="请选择市" />
</body>

3.引进ProvinceAndCity.js

<script type="text/javascript" src="js/ProvinceAndCity.js" ></script>

4.js调用

<script>

	    //绑定省市
	    var pro &
了解本专栏 订阅专栏 解锁全文 超级会员免费看
MingL520
关注
专栏目录
订阅专栏
provinceAndCity.json
01-06
包含全国城市省份数据的json。格式是[{province:xxx,city:[{city_name:xxx}]}]格式的
用JS动态载入省份和城市
dihuo9077的博客
08-25 395
这几天要写一个注册页面，需要用户填写其省份和城市，因此需要一个js文件来动态载入省份及其对应的城市名称。 下了点功夫在网上找到了省份和城市的资料，然后终于写成了这个非常长的js文件，记录之，以后还有很多地方可以用得着。 ////////////////ProvinceAndCity.js/////////////// 1var_city=newArray(34);2...
省市区三级联动—provinceCity.js
07-24
省市区三级联动provinceCity.js文件
province.js
08-06
//初始数据 var dsy = new Dsy(); dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西","海南省","四川省","贵州省","云南省","西藏","陕西省","甘肃省","青海省","宁夏","新疆","香港","澳门","台湾省"]); dsy.add("0_0",["北京市"]); dsy.add("0_0_0",["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云区","延庆区"]); dsy.add("0_1",["天津市"]); dsy.add("0_1_0",["和平区","河东区","河西区","南开区","河北区","红桥区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","滨海新区","宁河区","静海区","蓟县"]); dsy.add("0_2",["上海市"]); dsy.add("0_2_0",["黄浦区","徐汇区","长宁区","静安区","普陀区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","奉贤区","崇明区"]); dsy.add("0_3",["重庆市"]); dsy.add("0_3_0",["万州区","湆陵区","渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","綦江区","大足区","渝北区","巴南区","黔江区","长寿区","江津区","合川区","永川区","南川区","璧山区","铜梁区","潼南区","荣昌区","开州区","梁平区","武隆区","城口县","丰都县","垫江县","忠县","云阳县","奉节县","巫山县","巫溪县","石柱土家族自治县","彭水苗族土家族自治县","酉阳土家族苗族自治县","秀山土家族苗族自治县"]); dsy.add("0_4",["石家庄市","张家口市","承德市","秦皇岛市","唐山市","廊坊市","保定市","衡水市","沧州市","邢台市","邯郸市"]); dsy.add("0_4_0",["桥东区","桥西区","新华区","裕华区","井陉矿区","辛集市","藁城市","鹿泉区","栾城区","晋州市","新乐市","井陉县","正定县","行唐县","灵寿县","高邑县","深泽县","赞皇县","无极县","平山县","元氏县","赵县"]); dsy.add("0_4_1",["桥西区","桥东区","宣化区","下花园区","宣化县","张家口市宣化区","张北县","张北镇","康保县","康保镇","沽源县","平定堡镇","尚义县","南壕堑镇","蔚县","蔚州镇","阳原县","西城镇","怀安县","柴沟堡镇","万全县","孔家庄镇","怀来县","沙城镇","涿鹿县","涿鹿镇","赤城县","赤城镇","崇礼县","西湾子镇"]); dsy.add("0_4_2",["双桥区","双滦区","鹰手营子矿区","承德县","下板城镇","兴隆县","兴隆镇","平泉县","平泉镇","滦平县","滦平镇","隆化县","隆化镇","丰宁满族自治县","大阁镇","宽城满族自治县","宽城镇","围场满族蒙古族自治县","围场镇"]); dsy.add("0_4_3",["海港区","山海关区","北戴河区","昌黎县","昌黎镇","抚宁县","抚宁镇","卢龙县","卢龙镇","青龙满族自治县","青龙镇"]); dsy.add("0_4_4",["路北区","路南区","古冶区","开平区","丰润区","丰南区","遵化市","迁安市","滦县","滦州镇","滦南县","倴城镇","乐亭县","乐亭镇","迁西县","兴城镇","玉田县","玉田镇","唐海县","唐海镇"]); dsy.add("0_4_5",["安次区","广阳区","霸州市","三河市","固安县","固安镇","永清县","永清镇","香河县","淑阳镇","大城县","平舒镇","文安县","文安镇","大厂回族自治县","大厂镇"]); dsy.add("0_4_6",["新市区","北市区","南市区","定州市","涿州市","安国市","高碑店市","满城县","满城镇","清苑县","清苑镇","易县","易州镇","徐水县","安肃镇","涞源县","涞源镇","定兴县","定兴镇","顺平县","蒲阳镇","唐县","仁厚镇","望都县","望都镇","涞水县","涞水镇","高阳县","高阳镇","安新县","安新镇","雄县","雄州镇","容城县","容城镇","曲阳县","恒州镇","阜平县","阜平镇","博野县","博陵镇","蠡县","蠡吾镇"]); dsy.add("0_4_7",["桃城区","冀州市","深州市","枣强县","枣强镇","武邑县","武邑镇","武强县","武强镇","饶阳县","饶阳镇","安平县","安平镇","故城县","郑口镇","景县","景州镇","阜城县","阜城镇"]); dsy.add("0_4_8",["运河区","新华区","泊头市","任丘市","黄骅市","河间市","沧县","沧州市新华区","青县","清州镇","东光县","东光镇","海兴县","苏基镇","盐山县","盐山镇","肃宁县","肃宁镇","南皮县","南皮镇","吴桥县","桑园镇","献县","乐寿镇","孟村回族自治县","孟村镇"]); dsy.add("0_4_9",["桥东区","桥西区","南宫市","沙河市","邢台县","邢台市桥东区","临城县","临城镇","内丘县","内丘镇","柏乡县","柏乡镇","隆尧县","隆尧镇","任县","任城镇","南和县","和阳镇","宁晋县","凤凰镇","巨鹿县","巨鹿镇","新河县","新河镇","广宗县","广宗镇","平乡县","丰州镇","威县","洺州镇","清河县","葛仙庄镇","临西县","临西镇"]); dsy.add("0_4_10",["丛台区","邯山区","复兴区","峰峰矿区","武安市","邯郸县","南堡乡东小屯村","临漳县","临漳镇","成安县","成安镇","大名县","大名镇","涉县","涉城镇","磁县","磁州镇","肥乡县","肥乡镇","永年县","临洺关镇","邱县","新马头镇","鸡泽县","鸡泽镇","广平县","广平镇","馆陶县","馆陶镇","魏县","魏城镇","曲周县","曲周镇"]);
支付宝实现省市区三级联动my.multiLevelSelect（附带省市区js数据）
qq_51463650的博客
02-09 2531
支付宝实现省市区三级联动。my.multiLevelSelect 是级联选择功能 API。主要用于选择多级关联数据，例如省市区的信息选择。data数据免费提供，冲冲冲
jQuery下拉框二级三级城市联动插件
06-10
"jQuery下拉框二级三级城市联动插件"就是这样一个工具，它允许用户通过级联的下拉菜单，便捷地选择多级地理信息。这个插件基于JavaScript库jQuery构建，具有高度的灵活性和易用性。 首先，jQuery是JavaScript的一个...
城市三级插件.rar
05-23
城市三级联动地址选择...通过以上这些技术和方法，我们可以构建一个高效、易用的城市三级联动地址选择插件。在实际开发过程中，还需要关注代码的可维护性、测试覆盖率以及与后端接口的交互，确保整个系统的稳定运行。
jQuery下拉框二级三级城市联动插件.zip
09-21
本资源"jQuery下拉框二级三级城市联动插件.zip"提供了一个实现多级联动下拉框功能的jQuery插件，适用于网页上的地区选择，如省份、城市、区县等。这种功能常见于电子商务网站、地图服务或者任何需要用户输入详细地址...
城市三级联动插件.rar
10-14
总结，城市三级联动插件是Web开发中的一种常见组件，它基于JavaScript或前端框架实现，通过动态加载和联动效果提供良好的用户体验。理解和掌握其工作原理和实现方式，对于前端开发者来说是非常重要的技能。
中国城省市区名称数据cityData.js
01-29
你可以根据您的需要改造一下js代码中 的 key(你可以使用nodejs/python等脚本语言处理这个文件) 其中一个是 针对 vue element ui 级联选择器设计的省市区数据, 该数据来自国家统计局,
JS省市级联
long95wang的专栏
07-18 5901
下面的html页面中红色部分的js调用路径是相对于该html页面的     无标题页                     -=请选择国家=-         中国                     //下面是ProvinceAndCity.js页面的内容 //JS联动效果代码 //province(省份类) fun
js 省市2级联动效果
hch126163的专栏
12-07 8864
添加 省：市：  省：市：  省：市：           var __provinceAndCity = null; window.onload=function (){         __provinceAndCity = new __ProvinceAndCityClass($("slcProvince"),$("slcCity"));
常用的表格正则验证 + 省份选择 JS JQ
weixin_42555713的博客
08-07 1230
常用的表格正则验证 ----轮子 let receiverNameReg = /^[\u4e00-\u9fa5]{2,6}$/; //reg 收货人姓名 let receiverName = $("#receiverName").val(); //收货人姓名 let phoneNumberReg = /^\d{11}$/; //reg电话号 let phoneNumber = $('#phoneNumber').val(); //电话号码va
中国省市县信息JS文件（省--市--县）
热门推荐
Ms_WangH
07-19 4万+
来自网络： https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new 文件内容 // 地址文件 var provice = [ { name: "北京市", city: [ { ...
基于 bootstrap 的省市区地址选择的 js
未出笼的菜包的博客
05-30 2033
例如需要设立一个商场的开发网站，然后里面需要设置自己的收货地址即需要用到这类型的控件 效果 源代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试</title> <!-- 引入 jquery--&g.
uni-app 本地省市区三级联动
yyxhzdm的博客
08-13 693
效果图： 1.vue主要代码 template： <template> <view class="content"> <!-- 居住信息 --> <view class="item-address"> <view class="addressCot"> <view class="addressEdit"> ...
js实现省市级联的简单代码
lettuce_的博客
04-14 4316
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;省市级联&lt;/title&gt; &lt;script type="text/javascript"&gt; var cityList=new Array();//构建城市
jquery 地区三级联动插件
最新发布
01-29
JQuery地区三级联动插件可以灵活适应各种项目的地区需求，开发者可以根据自己的具体需求进行二次定制，满足不同地区选择的样式和交互要求。同时，该插件也支持数据的动态加载和更新，方便开发者及时更新地区数据，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MingL520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值