三级联动效果

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量168 收藏
点赞数
文章标签： javascript ViewUI 
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			var cityList = new Array();
			var quList = new Array();
			cityList['北京'] = ['北京'];
			cityList['浙江'] = ['杭州市', '温州市', '金华市', '临安市'];
			cityList['陕西'] = ['西安', '宝鸡', '咸阳'];
			cityList['甘肃'] = ['兰州市', '武威市', '酒泉市', '张掖市'];

			quList['北京'] = ['1区', '2区', '3区', '4区'];
			quList['杭州市'] = ['5区', '6区', '7区', '8区'];
			quList['温州市'] = ['9区', '10区', '11区', '12区'];
			quList['西安'] = ['13区', '14区', '15区', '16区'];
			quList['宝鸡'] = ['17区', '18区', '19区', '20区'];
			quList['兰州市'] = ['21区', '22区', '23区', '24区'];

			window.onload = allData;

			function allData() {
				var shengfen = document.getElementById('shengfen');
				for(var sf in cityList) {
					shengfen.add(new Option(sf, sf));
				}

			}

			function changeCity() {

				var chengshi = document.getElementById('chengshi');
				var sheng = document.getElementById('shengfen').value;

				chengshi.options.length = 1;
				for(var cs in cityList[sheng]) {
					chengshi.add(new Option(cityList[sheng][cs], cityList[sheng][cs]));

				}
			}

			function changequ() {
				var shiqu = document.getElementById('shiqu');
				var cheng = document.getElementById('chengshi').value;
				shiqu.options.length = 1;
				for(var sh in quList[cheng]) {

					shiqu.add(new Option(quList[cheng][sh], quList[cheng][sh]));

				}

			}
		</script>
	</head>

	<body>
		<br />

		<select id="shengfen" style="width:100px" οnchange="changeCity()">
			<option>--选择省份--</option>

		</select>
		<select id="chengshi" style="width:100px" οnchange="changequ()">
			<option>--选择城市--</option>

		</select>
		<select id="shiqu" style="width:100px">
			<option>--选择区县--</option>

		</select>

	</body>

</html>

　　参考链接：http://www.cnblogs.com/zjfree/archive/2011/11/30/2269342.html

 

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		省：
		<select style="width: 100px;" id="pre" οnchange="chg(this);">
			<option value="-1">请选择</option>
		</select>
		市：
		<select style="width: 100px;" id="city" οnchange="chg2(this);"></select>
		区：
		<select style="width: 100px;" id="area"></select>
	</body>
	<script>
		//声明省
		var pres = ["北京", "上海", "山东"]; //直接声明Array
		//声明市
		var cities = [
			["东城", "昌平", "海淀"],
			["浦东", "高区"],
			["济南", "青岛"]
		];
		var areas = [
				[
					["东城1", "东城2", "东城3"],
					["昌平1", "昌平2", "昌平3"],
					["海淀1", "海淀2", "海淀3"]
				],
				[
					["浦东1", "浦东2", "浦东3"],
					["高区1", "高区2", "高区3"]
				],
				[
					["济南1", "济南2"],
					["青岛1", "青岛2"]
				]
			]
			//设置一个省的公共下标
		var pIndex = -1;
		var preEle = document.getElementById("pre");
		var cityEle = document.getElementById("city");
		var areaEle = document.getElementById("area");
		//先设置省的值
		for(var i = 0; i < pres.length; i++) {
			//声明option.<option value="i">pres[i]</option>
			var op = new Option(pres[i], i);
			//添加
			preEle.options.add(op);
		}

		function chg(obj) {
			if(obj.value == -1) {
				cityEle.options.length = 0;
				areaEle.options.length = 0;
				return true;
			}
			//获取值
			var val = obj.value;
			pIndex = obj.value;
			//获取ctiry
			var cs = cities[val];
			//获取默认区
			var as = areas[val][0];
			//先清空市
			cityEle.options.length = 0;
			areaEle.options.length = 0;
			for(var i = 0; i < cs.length; i++) {
				var op = new Option(cs[i], i);
				cityEle.options.add(op);
			}
			for(var i = 0; i < as.length; i++) {
				var op = new Option(as[i], i);
				areaEle.options.add(op);
			}
		}

		function chg2(obj) {
			var val = obj.selectedIndex;
			var as = areas[pIndex][val];
			areaEle.options.length = 0;
			for(var i = 0; i < as.length; i++) {
				var op = new Option(as[i], i);
				areaEle.options.add(op);
			}
		}
	</script>

</html>

　　

weixin_33757911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三级联动小demo
weixin_45187559的博客
11-28 144
您选择的是： <input type="text" value="" id="addr-show"> <!-- 省份选择 --> <select id="prov" name="prov" onchange="showCity(this)"> <option>=请选择省份=</option> </select&g...
js实现省，市，区，门店，电话，地址多级联动
Suger的博客
07-12 272
js实现省，市，区，门店，电话，地址多级联动 比较常见的是省市区三级联动，多级联动的写法第一次写，是在三级联动的基础上改的，如有错误欢迎指出。思路很简单，父级下拉框改变的时候加载出子级元素，一层一层往下。如果上级改变，清空所有子级的选项，只留提示选项。效果有点像后台通过查询数据库实现联动的效果。如果需要提交数据，也可以通过后台来实现。 初始状态图： 选择之后效果图： 居中的图片: Html部分...
springmvc 三级联动 纯js代码实现 附加添加编辑实现
boywcx的博客
08-07 704
首先：jsp页面先写好标签 ---请选择--- ---请选择--- 市、县、区 添加信息页面的三级联动： 仅仅实现三级联动即可： 添加的页面js
快速编写三级联动小demo
Romantic_321的博客
06-23 991
首先先创建一个表，表数据和表结构如下：/* Navicat MySQL Data Transfer Source Server : bw Source Server Version : 50522 Source Host : 127.0.0.1:3306 Source Database : sss Target Server Type : ...
java 城市三级联动，包括表的建设以及后台
热门推荐
行走在天边的云
10-25 2万+
首先看下效果图： 当点击北京的时候，自动加载第二级以及第三级的数据。（二、三级默认的第一项）。 首先表的搭建： 这里注意PARENT_ID跟AREA_ID的关系，即北京市下面有很多区县，那么PARENT_ID的父类对应的都是1，方便我们的SQL语句查询。LEV是等级，因为是三级联动，所以目前我们分为1（直辖市及省会城市及特别行政区），2（地级市），3（区、县）。
Android PickerView实现三级联动效果
08-26
主要为大家详细介绍了Android PickerView实现三级联动效果，PickerView实现全国地址的选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现简单的省市县三级联动效果实例
10-22
主要介绍了js实现简单的省市县三级联动效果,以完整实例形式分析了JavaScript实现省市县三级联动效果的具体步骤与相关实现技巧,需要的朋友可以参考下
layui实现三级联动效果
10-16
主要为大家详细介绍了layui实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ajax实现select三级联动效果
10-18
主要为大家详细介绍了ajax动态实现select三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用Thymeleaf在前台下拉列表取值
一花一世界 一叶一菩提
07-26 1万+
Thymeleaf在网上的资源特别少 这两天在做一个springboot的项目 遇到下拉列表框 从后台取值动态获取列表框 我的做法是在项目启动访问index页面的时候 把要需要的列表集合存到session作用域 然后在页面取值 下面贴出代码@RequestMapping("index") public String index(HttpSession session){
js 实现简单的三级联动
彩色天的博客
11-05 1840
声明：只为学习交流使用，记得当时是从开源中国上看的，如有侵犯权利可联系我删除，并再次感谢原作者                       js 简单实现三级联动                   省：                     请选择                 市：                 区：        
模仿boss直聘网站省市地区三级联动效果
菜鸟丹丹的博客
09-22 1273
利用纯js写的    模仿boss直聘网站省市地区三级联动效果，有兴趣的可以看看，传送门：模仿boss直聘网站省市地区三级联动效果 效果图：    
js三级联动 地区下拉框选择器省市区
小码农吗
12-11 2132
一、页面html代码 省：<select style="width: 100px;" id="pre" onchange="chg(this);"> <option value="-1">请选择</option> </select> 市：<select style="width: 100px;" id="city" onchange="chg2(this)" ;></select> 区：<select style="w
省、市、地区联动选择JS封装类.
yxgyh的专栏
08-22 130
省、市、地区联动选择应用实例
bpmn-js推荐几款常用的插件
飞云先生
04-30 122
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 923
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 997
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
weixin_54339833的博客
05-02 382
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
在uniapp中用纯js写一个省市区三级联动效果图
04-19
首先，您可以使用uni-app开发框架中提供的picker组件来实现省市区三级联动效果。具体步骤如下： 1. 在页面中添加picker组件，并设置mode属性为"region"，可以实现省市区三级联动。 2. 在页面中添加一个data对象，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值