Jquery 实现下拉列表三级联动

朴灿烈づ我的快乐病毒、 2023-10-18 13:46 121阅读 0赞

**需求: (1) 根据 省、获得市、**

**(2) 通过市，再获得到县，**

**(3) 每个下拉框数据都由一个数组组成;**

**效果：**

**初始页面**

**![20190115155224113.png][]**

加载省份

**![2019011515523340.png][]**

通过选择省份，获得对应的市

**![2019011515524459.png][]**

再通过市，获得对应的区

**![20190115155257539.png][]**

HMTL代码：

<body>
    		省份：<select id="selProvince">
    			<option value="-1">--请选择--</option>
    		</select>
    		城市：<select id="selCity">
    			<option value="-1">--请选择--</option>
    		</select>
    		</select>
    		区：<select id="selArea">
    			<option value="-1">--请选择--</option>
    		</select>
    	</body>

JS

<script type="text/javascript">
    	$(function(){
    		//初始化参数
    		var provinces = ['浙江','江苏','安徽'];
            var citys =[['杭州','宁波','温州'],['南京','无锡','苏州'],['合肥','安庆','黄山']];
            var aears =[ [['上城区','下城区','西湖区','拱墅区'],['江北区','慈溪市'],['鹿城区','乐清市']],
            [['玄武区','鼓楼区'],['滨湖区','宜兴市 '],['虎丘区','姑苏区']],
            [['庐阳区','长丰县'],['迎江区','桐城市'],['黄山区','休宁县']]];
    
           // alert(provinces.length);
            //add province
            for (var i = 0; i <provinces.length; i++) {
            	  $("#selProvince").append("<option value=p"+i+">"+provinces[i]+"</option>");
            }
            
            var pIndex=0;
            
            //provinces change
            $("#selProvince").change(function(){
            	
            	//第一个不移除
            	$("#selCity").children().not(":first").remove();
    
            	//select province value=>index
            	 pIndex=$(this).children("option:selected").index();
            	
            	//city index from 0;
            	var city =citys[pIndex-1];
            	//循环
            	for (var i = 0; i < city.length; i++) {
            		  $("#selCity").append("<option value=c"+i+">"+city[i]+"</option>");
            	}
            	
            });
            
            
            //citys change
             $("#selCity").change(function(){
             	//第一个不移除
            	$("#selArea").children().not(":first").remove();
            	
            	//获得city的索引
            	var cIndex=$(this).children("option:selected").index();
            	
            	//获得area
            	var are=aears[pIndex-1][cIndex-1];
            	
            	for (var i = 0; i < are.length; i++) {
            		  $("#selArea").append("<option value=a"+i+">"+are[i]+"</option>");
            	}
            	
             	
             });
           
            
         });
          
    </script>

[20190115155224113.png]: https://img-blog.csdnimg.cn/20190115155224113.png
[2019011515523340.png]: https://img-blog.csdnimg.cn/2019011515523340.png
[2019011515524459.png]: https://img-blog.csdnimg.cn/2019011515524459.png
[20190115155257539.png]: https://img-blog.csdnimg.cn/20190115155257539.png

发表评论取消回复

表情：

评论列表（有 0 条评论，121人围观）

还没有评论，来说两句吧...

相关阅读

相关二级联动下拉列表

二级联动下拉列表需先选择英雄,才能在选择英雄的皮肤 html页面 <!DOCTYPE html> <html> <head>

忘是亡心i/ 2023年01月09日 12:36/ 0 赞/ 150 阅读

相关 Mybatis + js 实现下拉列表二级联动

Mybatis + js 实现下拉列表二级联动学习内容：一、业务需求二、实现效果三、代

太过爱你忘了你带给我的痛/ 2022年10月06日 04:58/ 0 赞/ 227 阅读

相关【JQuery】使用JQuery实现城市两级或三级联动（下拉菜单）

本文只要是通过使用JQuery实现城市（省、市、县）两级或三级联动，并使用下拉菜单展现。主要的代码如下： 1、在Controller中的代码： @RequestMa

Dear 丶/ 2022年09月27日 04:50/ 0 赞/ 164 阅读

相关 Excel中如何制作下拉列表及联动下拉列表

http://jingyan.baidu.com/article/414eccf61887cf6b421f0a74.html excel快速定位并提取指

╰+攻爆jí腚メ/ 2022年06月12日 09:18/ 0 赞/ 438 阅读

相关自动筛选实现三级联动下拉菜单

要点：当选择一个选项的时候，后面的内容自动变成他自己独有的内容主要运用： 1、$(id).change(function(){}) 2、.show（） 3、

妖狐艹你老母/ 2022年06月08日 09:39/ 0 赞/ 271 阅读

相关点击按钮实现下拉菜单的三级联动

主要内容：点击查询品牌按钮，选择厂商1的时候，显示厂商1的品牌，点击厂商二的时候，显示厂商2的品牌，同理，不同的品牌对应不同的型号源代码： <!DOCTYPE h

浅浅的花香味﹌/ 2022年06月08日 09:38/ 0 赞/ 229 阅读

相关 js下拉列表二级联动

学了JS也有一段时间了，今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动，就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有

刺骨的言语ヽ痛彻心扉/ 2022年06月01日 04:41/ 0 赞/ 409 阅读

相关 jquery实现select三级联动（简单易懂）

尽可能每一步都做到详细，算是一个知识的回顾，有不足之处，希望大家多提意见该例子实现的是省市县三级联动。实现原理：省

妖狐艹你老母/ 2022年05月28日 03:24/ 0 赞/ 220 阅读

相关下拉列表多级联动前端实现

一获取一级分类 1 组件数据定义添加在Info.vue的data中 subjectList: [], // 一级分类 subjec

川长思鸟来/ 2021年07月24日 19:04/ 0 赞/ 569 阅读

相关 jquery ajax 下拉列表三级联动

![在这里插入图片描述][20190803222142964.png] ![在这里插入图片描述][2019080322215935.png] ![在这里插入图片描述][

超、凢脫俗/ 2021年06月26日 16:06/ 0 赞/ 516 阅读