83行实现城市三级联动(有些地区自己添加)jquery

最新推荐文章于 2024-07-21 02:56:05 发布
最新推荐文章于 2024-07-21 02:56:05 发布
阅读量357 收藏
点赞数
分类专栏： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lanou_XuWeiJie/article/details/80492304
版权
js 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<select>
			<option>选择省</option>
		</select>
		<select>
			<option>选择市</option>
       </select>
		<select>
           <option>选择区</option>
		</select>
	</body>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		var select1 = $("select").eq(0);
		var select2 = $("select").eq(1);
		var select3 = $("select").eq(2);
		function Map() {
			this.item = {};
		}
		var map = new Map();
		map.put = function(id, iarray) {
			this.item[id] = iarray;
		}
		map.getArr = function(id) {
			return this.item[id];
		}
		map.put("0", ["江苏", "浙江"]);
		map.put("0-0", ["南京", "无锡"]);
		map.put("0-1", ["杭州", "金华"]);
		map.put("0-0-0", ["南京区","南京区2"]);
		map.put("0-0-1", ["无锡区","无锡区2"]);
		map.put("0-1-0", ["杭州区","杭州区2"]);
		map.put("0-1-1", ["金华区","金华区2"]);
			for(key in map.item) {
				if(key.indexOf("-") == -1) {
					var value = map.getArr(key);
					for(var i=0;i<value.length;i++){
						select1.append("<option key1='"+i+"'>" + value[i] + "</option>");
					}	
				}
			}
			select1.change(function(){
			  var value = this.value;
			  if(value!="选择省"){
			      var key1 = $(this).find("option:selected").attr("key1");
			      var key2 = "0-"+key1;
			      var value2 = map.getArr(key2);
			       select2.empty();
			       select2.append("<option>选择市</option>")
			      for(var i=0;i<value2.length;i++){
			      	var key3 = key2+"-"+i;
			      	    select2.append("<option key3='"+key3+"'>"+value2[i]+"</option>");
			      }
			  }else{
			  	select2.empty();
			    select2.append("<option>选择市</option>")
			    select3.empty();
				select3.append("<option>选择区</option>")
			  }
			});
			select2.change(function(){
				var value = this.value;
				if(value != "选择市"){
					var key3 = $(this).find("option:selected").attr("key3");
				    var value3 = map.getArr(key3);
				    select3.empty();
				    select3.append("<option>选择区</option>")
				    for(var i=0;i<value3.length;i++){
				    	select3.append("<option>"+value3[i]+"</option>");
				    }
				}else{
					select3.empty();
				    select3.append("<option>选择区</option>")
				}
			});
	</script>
</html>

Lanou_XuWeiJie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery城市三级联动菜单特效
07-24
本项目“jQuery城市三级联动菜单特效”利用jQuery的功能，构建了一个实用的省市区三级联动选择器，用户在选择时能流畅地从省级选项过渡到市级，再细化到区级，提供了一种高效且友好的用户体验。 首先，我们要理解...
如何使用JQuery实现Js二级联动和三级联动
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-27 2213
好了，以上代码就是使用JQuery库来实现的上面的二级三级联动，希望多多支持！
jQuery select三级联动
蹦哒哒的王小哲
02-01 787
又是不想写总结的一天，没什么才艺，给大家展示个乒乓对打吧~
JQuery三级联动
white_froth的博客
08-01 365
JQuery三级联动
使用jQuery实现三级联动
qq_36949892的博客
07-03 2087
三级联动的设计 首先这是我的数据数组 var prosArr = ["广东", "广西", "宁夏", "四川"] var citiesArr = [ ['广州市', '韶关市', '深圳市', '珠海市'], ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺...
使用JQuery和bootstrap-select实现世界城市的三级联动（中英互译）
lin_ji_you的博客
05-17 1023
使用JQuery和bootstrap-select实现世界城市的三级联动（中英互译） 我们公司是做外贸电商的，需要一个世界城市的三级联动，在网上找好久发现都没有合适的轮子，只能自己写一个 使用该轮子需要引用bootstrap-select 使用该轮子需要引用JQuery 使用该轮子需要引入世界城市的json数据 var worldcountry = Widget.extend({ init: function () { this.total(this); wind
jquery实现城市三级联动效果
10-13
下面我们将详细探讨如何使用jQuery实现城市三级联动效果。 首先，我们需要理解什么是联动效果。联动效果是指在一个下拉菜单（或其他选择器）的选择发生变化时，自动更新另一个或多个相关下拉菜单的内容。在城市三级...
jQuery手机端城市地区选择点击省市区三级联动
11-03
在移动应用和网页开发中，实现用户友好...完成上述步骤后，你将得到一个功能完善的jQuery手机端城市地区选择器，实现省市区三级联动的效果。通过不断优化和调整，可以使其更加符合用户的操作习惯，提升应用的整体体验。
强大的jQuery省市区城市三级联动插件
06-10
**jQuery省市区城市三级联动插件详解** 在Web开发中，常常需要实现省市区三级联动效果，以便用户在填写表单时能方便地选择所在地区。这款强大的jQuery插件正为此目的而设计，它提供了简单易用的API，使得开发者能够...
【JQuery】使用JQuery实现城市两级或三级联动（下拉菜单）
每一名出色的架构师，必定是一位优秀程序员
03-07 4976
本文只要是通过使用JQuery实现城市（省、市、县）两级或三级联动，并使用下拉菜单展现。主要的代码如下： 1、在Controller中的代码： @RequestMapping(value="/tourAreaAdd.htm") public String toTourAreaAdd(HttpServletRequest request, Integer shoppingTourRulesId
jQuery 通用三级下拉联动菜单插件增强版
05-12
内容索引:脚本资源,jQuery,下拉菜单,三级联动　　用Jquery实现的三级联动下拉列表插件，压缩包内有多个不同的版本，其实现的基本原理大同小异，无非是调用方式的不同，第一个是通过读取XML构建，支持IE/firefox，chrome不支持，XML部分可以改成AJAX的方式，这样chrome支持就不成问题；第二个是采用Json数据格式构建，是第二次尝试改进；第三个与第二个其实是一样的，只不过将数据分离到JS文件中，代码中的ASP文件，是调用数据库生成Json省市区数据的，如果页面直接调用ASP文件，速度会很慢，生成JS文件后直接调用就要快的多，而且这部分数据一般不会改动。
JQuery+Ajax实现省市区三级联动（附效果图+数据库）
热门推荐
NaMgAl_的博客
01-09 3万+
一、效果图 1、页面加载后（初始化：北京市-北京市-东城区） 2、单击选择省份后（改变成：河北省-石家庄市-长安区） 二、jsp页面 省市区三级联动 $(function() { // 初始化省市区 initAddress(); // 更改省份后的操作 $("select[name='province']").change(func
使用Jquery实现三级联动
weixin_39230257的博客
09-10 4259
         使用Jquery实现三级联动，首先大家可以从网络上获取一份全国省市区的JSON数据，这里我展示部分，        获取JSON数据后，首先简单写一个页面，这里我简单写几个主要标签，如下图。                                                                         干货先上，代码如下 &lt;!D...
jQuery库+distpicker库实现省市区三级联动效果（超简单版）
mqh16696033405的博客
12-24 1337
创建一个省-市-区 (省市区) 三级联动下拉列表，用于选择中国的地理位置。这种功能通常用在用户需要选择其位置的表单中，本文将使用 jQuery 和distpicker库实现省-市-区 (省市区) 三级联动下拉列表distpicker
常用三级联动插件
Little_ChenH的博客
03-11 4830
我们在日常开发中，如果做表单，经常会遇到这样的需求： 根据你的首栏选项来动态加载第二栏的选项内容，再根据第二栏的选中项，动态加载第三栏内容，依次类推等等。这样的功能称之为三级联动，常用于城市选择，多门类产品选择，科室信息等。而对于许多没有接触过的人，都会觉得头大。 第一次碰到时，笔者也栽了坑，因此学习总结，记录为一篇博客。 一、简单的纯js原理实现 以下的三级联动是纯前端实现的...
自己做jQuery开源插件之一：三级联动插件
钱多多的专栏
03-19 2580
从毕业到现在，大大小小的项目做了不少，基本上都是做的web，记得刚参加工作的时候对前端技术不怎么了解，还是以拖服务器控件为主，几乎不考虑用户体验，后来随着工作经验的不断积累，对前端技术逐渐开始感兴趣，并且不断深入学习，到现在完全痴迷于jquery，以至于现在做项目整个做下来看不到一个服务器端控件，全部都是客户端控件搭配jquery完成数据的获取、展示和提交。最近这一年对写jQuery插件特别感兴趣
jquery实现联动效果 （通用）省市的三级联动 四级联动 同样的做法
@Yan*_*zeng博客
11-16 432
三级联动效果
jquery 实现省市区三级联动
最新发布
weixin_41471968的博客
07-21 71
jQuery 实现省市区三级联动 在网页开发中，经常需要实现一些动态的表单元素，例如省市区三级联动。这种表单元素可以让用户更方便地选择地区信息。本文将介绍如何使用 jQuery 插件来实现这一功能。 简介 省市区三级联动是一种常见的表单元素，它允许用户通过选择省级行政区，然后选择市级行政区，最后选择县级行政区。这种表单元素...
jQuery三级联动插件（2.3.2）
姥姥家的饭
06-22 1877
jQuery模仿element-ui三级联动，箭头图标用的layui里面的，可以自定义。数据用的本地三级联动数据，也可以改为后台数据 代码github地址 引入js <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://heerey525.github.io/layui-v2.4.3/layui/layui.js"></sc.
javascript实现省市区三级联动下拉菜单
"省市区三级联动下拉框菜单javascript版，通过javascript实现省市区三级联动的下拉菜单功能，包括两种实现方法和相关的JS插件引用。" 在网页开发中，有时候我们需要实现一个功能，即当用户在一级下拉菜单中选择某个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值