<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {  //入口函数
            //获得城市对象的下拉框
            var $city = $("#city");

            var $xian = $("#xian");

            var provinces = ["河南省","安徽省"];

            var cities = [
                ["河南市1", "河南市2"],
                ["安徽市1", "安徽市2"]
            ];
            var xians = [  //三维数组
                [["河南县1", "河南县11", "河南县111"], ["河南县2", "河南县22", "河南县222"], ["无", "无"]],
                [["安徽县1", "安徽县11", "安徽县111"], ["安徽县2", "安徽县22", "安徽县222"]]

            ];

            //遍历显示出省份
            $.each(provinces, function (i, n) {

                $("#province").append("<option name='city'>" + n + "</option>");

            });

            //如果省改变

            $("#province").change(function () {

                $city.get(0).length = 1;
                $xian.get(0).length = 1;
                //清空城市列表按钮 , 只保留第一个 <option value="0" name="city">请选择</option>
                //清空县列表按钮 , 只保留第一个 <option value="0" name="city">请选择</option>

                var a = $("#province option:selected").index() - 1;
                $.each(cities, function (i, n) {  //n是城市的cites数组的一个
                    if (a == i) {  //如果省的value值等于citys数组的索引, 就遍历这个城市数组中的这个
                        $(n).each(function (j, m) {
                            //创建对象，并且添加到城市下拉框中
                            $city.append("<option name='city'>" + m + "</option>");

                        });
                    }
                });

            });

            //如果市改变
            $("#city").change(function () {

                var c = $("#city option:selected").index() - 1; //获得市的索引
                var p = $("#province option:selected").index() - 1; //获得省的索引
                $xian.get(0).length = 1;
                //清空城市按钮 , 只保留第一个 <option value="0" name="city">请选择</option>

                $.each(xians, function (i, n) {

                    //先通过省的索引遍历县的三维数组获的二维数组

                    if (p == i) { //如果省的索引等于县的二维数组索引,
                        //n就是那个三维数组中的二维数组
                        $(n).each(function (j, m) {  //在遍历这个二维数组
                            if (c == j) { //下面遍历一维数组
                                $(m).each(function (x, p) {

                                    //创建对象，并且添加到城市下拉框中
                                    $xian.append("<option name='city'>" + p + "</option>");

                                });
                            }

                        });
                    }
                });
            });
        });

    </script>

</head>
<body>

省份：<select id="province">
    <option value="0" name="city">请选择</option>
</select>
城市：<select id="city">
    <option value="0" name="city">请选择</option>
</select>
县：<select id="xian">
    <option value="0" name="city">请选择</option>
</select>
</body>
</html>

//自己导入一个JS库复制代码就能直接运行

分析 :

//省和市都有对应的索引, 遍历三维数组时根据  [ 省索引 ] [ 市索引 ]找到对应三维数据里面对应的数据

//所以你自己自定义数据的时候 , 省市县的索引也要一一对应!

												


											
JQuerys实现三级省市联动的更多相关文章
	

    
								
  1. VUE2+elementUI前端实现 三级省市联动select
		
    html: <el-form-item label="选择地区:"> <el-select size="small" style=" ...
    
		
    2. 
						
  2. 省市联动_简单的Demo，适用于各种二级菜单联动
		
    最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...
    
		
    3. 
						
  3. js实现的省市联动
		
    最近工作,要用到省市联动的功能.网上搜了一下,发现有很多这样的例子,看了不少实例,把觉得写得不错的代码穿上来,好给大家分享一下. <!DOCTYPE html PUBLIC "-//W ...
    
		
    4. 
						
  4. jquery省市联动，根据公司需求而写
		
    //author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...
    
		
    5. 
						
  5. Json 基于jQuery+JSON的省市联动效果
		
    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
    
		
    6. 
						
  6. AJAX案例四：省市联动
		
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
    
		
    7. 
						
  7. Dynamic CRM 2013学习笔记（八）过滤查找控件 （类似省市联动）
		
    我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤 ...
    
		
    8. 
						
  8. [JS]以下是JS省市联动菜单代码
		
    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...
    
		
    9. 
						
  9. 通过Javascript数组设计一个省市联动菜单
		
    通过Javascript数组设计一个省市联动菜单 使用Option内置类来完成下拉选项的创建 2.使用定时器实现一个时钟程序 3.使用PHP+JSON完成语音验证码 网址:http://yuyin.b ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. R的环境系统
			
      r环境概念 环境:用来具体存储对象的地方. 规则1:每一个对象都存储在一个环境当中. 规则2:每一个环境都与一个父环境相连接,构成一个分层的环境系统. 规则3:子环境与父环境的连接是单向的. pa ...
    
			
    2. 
						
  2. 一个python问题引发的思考
			
    问题: pyqt5下开发的时候,遇到了一个这样的问题.Traceback (most recent call last):File “test.py”, line 3, in from PyQt5.Q ...
    
			
    3. 
						
  3. Luogu P2570 [ZJOI2010]贪吃的老鼠
			
    Luogu P2570 [ZJOI2010]贪吃的老鼠 题目描述 奶酪店里最近出现了\(m\)只老鼠!它们的目标就是把生产出来的所有奶酪都吃掉.奶酪店中一天会生产\(n\)块奶酪,其中第\(i\)块的 ...
    
			
    4. 
						
  4. CentOS7下rsync服务端与Windows下cwRsync客户端实现数据同步配置方法
			
    最近需求想定期备份服务器d盘的数据到Linux服务器上面,做个笔记顺便写下遇到的问题 以前整过一个win下的cwrsync(客户端)+rsync(服务端:存储)的bat脚本 和整过一个Linux下的r ...
    
			
    5. 
						
  5. IT兄弟连 Java语法教程 数组 深入数组 内存中的数组
			
    数组是一种引用数据类型,数组引用变量只是一个引用,数组元素和数组变量在内存里是分开存放的.下面将深入介绍数组在内存中的运行机制. 内存中的数组 数组引用变量只是一个引用,这个引用变量可以指向任何有效的 ...
    
			
    6. 
						
  6. 解决centos下tomcat启动太慢 & JDBC连接oracle太慢的问题
			
    近期遇到一个非常奇怪的问题,也不知道改了什么,tomcat启动非常慢,以前几秒就启动好了,现在要30秒左右. 而且,通过jdbc连接oracle数据库也非常慢,以前建立一个连接只要几十毫秒,现在也要1 ...
    
			
    7. 
						
  7. Containers vs Serverless：本质区别是什么？
			
    在云计算领域,容器和无服务器计算已经占据了发展前列. 作者 | Emra Samdan 翻译 | bocloudresearch 一点历史 在不久以前,应用程序的开发.部署和维护要比现在复杂得多,耗时 ...
    
			
    8. 
						
  8. Spring Boot2 系列教程(二十二)整合 MyBatis 多数据源
			
    关于多数据源的配置,前面和大伙介绍过 JdbcTemplate 多数据源配置,那个比较简单,本文来和大伙说说 MyBatis 多数据源的配置. 其实关于多数据源,我的态度还是和之前一样,复杂的就直接上 ...
    
			
    9. 
						
  9. org.springframework.util.Base64Utils线程安全问题
			
    Spring提供的org.springframework.util.Base64Utils类,先会检测JDK里是否自带java.util.Base64,如果不带,则使用的是apache提供的org.a ...
    
			
    10. 
						
  10. java基础(10):继承、抽象类
			
    1. 继承 1.1 继承的概念 在现实生活中,继承一般指的是子女继承父辈的财产.在程序中,继承描述的是事物之间的所属关系,通过继承可以使多种事物之间形成一种关系体系.例如公司中的研发部员工和维护部员工 ...
    
			
    11.