jQuery 二级联动

最新推荐文章于 2022-08-04 09:08:15 发布

晨淼

最新推荐文章于 2022-08-04 09:08:15 发布

阅读量841

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zzq_88/article/details/12094719

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script language='javascript' src='./js/jquery.js'></script>
	<script type="text/javascript">
		var c1 = ['广东', '湖北'];
		var c2 = [['广州', '深圳', '东莞'], ['武汉', '十堰', '襄阳']];
		// 省市二级联动
		$(document).ready(function(){
			select1();
			$('#select1').bind('change', function(){
				select2();
			});
		});

		// 第一级
		function select1(){
			var city1 = $('#select1');
			for(var i in c1){
				var option = new Option(c1[i], c1[i]);
				city1[0].options.add(option);
			}
		}

		// 第二级
		function select2(){
			var city1 = $('#select1');
			var city2 = $('#select2');
			city2[0].length = 0;
			var index = city1[0].selectedIndex;
			for(var i=0, len=c2[index].length; i<len; ++i){
				var option = new Option(c2[index][i],c2[index][i]);
				city2[0].options.add(option);
			}
			
		}
	</script>
</head>
<body>
	<!--<div style="float:left; cursor:pointer;"><img src="./images/1.png" οnclick="display(this)"></div>-->
	<form>
		<select id = 'select1''></select>
		<select id = 'select2'></select>
	</form>
</body>
</html>

晨淼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 二级联动

var c1 = ['广东', '湖北']; var c2 = [['广州', '深圳', '东莞'], ['武汉', '十堰', '襄阳']]; // 省市二级联动 $(document).ready(function(){ select1(); $('#select1').bind('change', function(){ select2(); });
复制链接

扫一扫

专栏目录