三级联动效果

<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" onchange="changeCity()">
			<option>--选择省份--</option>

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

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

		</select>

	</body>

</html>

  

时间: 2024-11-07 17:11:40

三级联动效果的相关文章

Android开发之解析XML并实现三级联动效果

请尊重他人的劳动成果,转载请注明出处:Android开发之解析XML并实现三级联动效果 本实例主要应用XmlPullParser解析XML文档中的省市区,然后将数据绑定到Spinner上实现三级联动的效果.关于XmlPullParser的详解大家可以参考<Android开发之使用PULL解析和生成XML>一文. 运行效果图: 程序代码: 核心代码: <pre name="code" class="java">package com.jph.s

自写日期年月日三级联动效果jquery插件

哈哈,好久没写新博文啦,原因是最近一直在研究用jquery UI实现截取头像的功能,哈哈 言归正传,有时候呢,我们会在用户资料的页面用到一个年月日日期的三级联动效果.在网上找了找,没看到有多么合适的(主要是本屌丝倾向于用jquery写成插件的形式使用,哈哈~~) 这篇博文呢,主要目的是给大家看下我用jquery写成插件的形式. 原理很简单,就是判断闰年,然后在select change事件的时候给显示日期的select重新append option (PS.不知道为啥,js有appendchil

PHP开发中基于layUI的三级联动效果如何实现

后台开发常常用到layUI框架,这样才能让整个页面效果看起来美观大方,然而有时候一些原生的效果放到layUI框架上是无法使用的,比如最近遇到了省市县三级联动的select效果.不同于之前的,layUI框架里,需要重视select的lay-filter属性,来监听事件,另外需要form.render()来重新渲染,解决这两大难题,联动也就不再是难题.下面就来为大家分享下吧. 实现代码: <!DOCTYPE html><html><head><meta charset

Vue如何使用vue-area-linkage实现地址三级联动效果

很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 一.安装 // v5之前的版本 npm i --save vue-area-linkage // v5及之后的版本 npm i --save vue-area-linkage area-data or yarn // v5之前的版本 yarn add vue-area-linkage // v5及之后的版本 yarn

Ajax来实现下拉框省市区三级联动效果(服务端基于express)

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)

基于jQuery+JSON的省市县 二级 三级 联动效果

省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty

javascript三级联动效果实现

function linkQ(sel1,sel2,sel3,arr){     var sel1v=$.map(arr,function(val,key){return key})     // 将sel1的option放入     $.each(arr,function(i,n){         sel1.append("<option value="+ n.provinceId +">"+ n.provinceName +"</op

ionic+AnjularJs实现省市县三级联动效果

建议对ionic和AnjularJs有一定了解的人可以用到,很多时候我们要用到选择省份.城市.区县的功能,现在就跟着我来实现这个功能吧,用很少的代码(我这里是根据客户的要求,只显示想要显示的部分省份和其相对应的城市.区县,并且这些数据将通过后台放入数据库,并没有引用完整的城市js) 1.首先在所需要的HTML页面需要这些代码,其中的样式都是自己定义的,不喜欢的可以按照自己喜好来写: <div class="list"> <div class="list&qu

javascript三级联动效果实现2

var text = ""; for (i = 0; i < data.length; i++) {     text += "<option value=" + i + " data-pId=" + data[i].pId + ">" + data[i].pName + "</option>"; } $(".shengf").append(text); /