杰晶网络

JS实现省市县三级下拉联动
网络编程 2025/11/1 佚名
3 2

纯JS实现省市县三级下拉联动，供大家参考，具体内容如下

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>省市县三级下拉联动-李康</title>
 <style>
 fieldset{
 width: 25%;
 border: 1px dashed black;
 }
 legend{
 margin-left: 135px;
 }
 </style>
</head>
<body>
 <form action="">
 <fieldset>
 <legend>地址信息</legend>
 请选择居住地：<br><br>
 <select id="province" οnchange="chooseProvince(this)">
 <option value="1">--请选择省--</option>
 </select>
 <select id="city" οnchange="chooseCity(this)">
  <option value="2">--请选择市--</option>
 </select>
 <select id="area">
 <option value="3">--请选择区--</option>
 </select>
 </fieldset>
 </form>
 
 <script>
 var provinceList = [{
 name: '北京',
 cityList: [
 { name: '市辖区', areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区'] },
 { name: '县', areaList: ['密云县', '延庆县'] }]
 },{
 name: '河南',
 cityList: [
 { name: '郑州市', areaList: ['市辖区', '中原区', '二七区', '管城回族区', '金水区', '上街区', '邙山区', '中牟县', '巩义市', '荥阳市', '新密市', '新郑市', '登封市'] },
 { name: '开封市', areaList: ['市辖区', '龙亭区', '顺河回族区', '鼓楼区', '南关区', '郊　区', '杞　县', '通许县', '尉氏县', '开封县', '兰考县'] },
 { name: '洛阳市', areaList: ['市辖区', '老城区', '西工区', '廛河回族区', '涧西区', '吉利区', '洛龙区', '孟津县', '新安县', '栾川县', '嵩　县', '汝阳县', '宜阳县', '洛宁县', '伊川县', '偃师市'] },
 { name: '新乡市', areaList: ['市辖区', '红旗区', '卫滨区', '凤泉区', '牧野区', '新乡县', '获嘉县', '原阳县', '延津县', '封丘县', '长垣县', '卫辉市', '辉县市'] },
 { name: '焦作市', areaList: ['市辖区', '解放区', '中站区', '马村区', '山阳区', '修武县', '博爱县', '武陟县', '温　县', '济源市', '沁阳市', '孟州市'] }]
 },{
 name: '湖北',
 cityList: [
 { name: '武汉市', areaList: ['市辖区', '江岸区', '江汉区', '乔口区', '汉阳区', '武昌区', '青山区', '洪山区', '东西湖区', '汉南区', '蔡甸区', '江夏区', '黄陂区', '新洲区'] },
 { name: '黄石市', areaList: ['市辖区', '黄石港区', '西塞山区', '下陆区', '铁山区', '阳新县', '大冶市'] },
 { name: '十堰市', areaList: ['市辖区', '茅箭区', '张湾区', '郧　县', '郧西县', '竹山县', '竹溪县', '房　县', '丹江口市'] }]
 }
 ];
 var provinceArray = new Array();
 var cityArray = new Array();
 var areaArray = new Array();
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 window.onload = function(){ //用window的onload事件，窗体加载完毕的时候
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 for (var i = 0; i < provinceList.length; i++) {
 var province = provinceList[i]; //获取省
 var provinceName = province.name; //获取省名
 console.log(provinceName);
 provinceArray[i] = provinceName;
 provinceTag.add(new Option(provinceName, i));
 //通过Option方法将省名与下标对应，再将名字放到provinceTag中
 }
 }
 
 //建立省市之间的连接
 function chooseProvince(th) {
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 var index = th.selectedIndex - 1; //“请选择省” 占了一个索引，所以需要减1
 var provinceName = provinceArray[index]; //获取省名
 for (var n = 0; n < provinceList.length; n++) {
 var provice = provinceList[n];
 console.log(provice.name == provinceName); //控制台打印方便观看
 if (provice.name == provinceName) { //开始建立连接，通过if判断，前提是要满足if中的条件
  cityList = provice.cityList; //通过province的cityList获取城市列表
  cityTag.innerHTML = ""; //保证city为所选中的省的市
  console.log(cityList); //控制台打印
  for (var c = 0; c < cityList.length; c++) {
  var city = cityList[c]; //获取城市
  var cityName = city.name; //获取城市名
  cityArray[c] = cityName;
  cityTag.add(new Option(cityName, c)); //使用Option()方法获取每一个索引对应的数据，然后使用add()方法存入到数组中去，创建省市连接
  }
 }
 }
 }
 
 // 建立市县之间的连接
 function chooseCity(ci) {
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 var index = ci.selectedIndex;
 var cityName = cityArray[index];//获取城市名
 for (var j = 0; j < cityList.length; j++) {
 var city = cityList[j];//获取城市
 if (city.name == cityName) {
  var areaList = city.areaList;//县级列表数据
  areaTag.innerHTML = "";
  for (var k = 0; k < areaList.length; k++) {
  var area = areaList[k];//获取县
  areaTag.add(new Option(area, k));
  }
 }
 }
 }
 </script>
</body>
 
</html>

效果如下

JS实现省市县三级下拉联动

如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是javascript实现省市区三级联动下拉框菜单的全部代码，希望对大家的学习有所帮助。

标签：
js省市县三级下拉联动,js三级下拉联动,js下拉联动
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“JS实现省市县三级下拉联动”
暂无“JS实现省市县三级下拉联动”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2025/11/1

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网