省市二级联动（jQuery）

最新推荐文章于 2024-05-31 10:47:24 发布

藜笙

最新推荐文章于 2024-05-31 10:47:24 发布

阅读量493

点赞数

分类专栏： jQuery 文章标签： html

本文链接：https://blog.csdn.net/HG13542386794/article/details/116881419

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

下面的内容主要是用jQuery来写的，而想使用JQ方法，就需要应用jQ 插件。

jQ 插件可在官网上下载。

话不多说，直接上代码。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<script src="js/jquery-3.2.1.js"></script>
</head>

<body>
	<select name="" id="selProvince">
	    <option value="">--请选择--</option>
	</select>
	<select name="" id="selCity">
	    <option value="">--请选择--</option>
	</select>
	<script>
	    var iNum1;
		var iNum2;
		var aProvince = ['湖北', '湖南', '广东'];
	    var aCity = [
			['武汉', '襄阳', '荆州'],
		    ['长沙', '株洲', '湘潭'],
		    ['广州', '深圳', '东莞']
		];
		$(function () {
	        for (var i=0;i<aProvince.length;i++) {
	            $("#selProvince").append('<option>'+ aProvince[i] + '</option>');
	        };
			
			/*当元素的值发生改变时，会发生 change 事件*/
       $("#selProvince").change(function(){
		   /*':eq'匹配一个给定索引值的元素*/
       $('#selCity').children().not(':eq(0)').remove();
           iNum1 = $(this).children("option:selected").index();
		var aaCity = aCity[iNum1-1];
		for(var j = 0;j<aaCity.length;j++){
			$('#selCity').append('<option>'+ aaCity[j] + '</option>');
			 }
	   	});	
  });

有不懂的，可在下面留言。 @ ^_^ @

藜笙

关注

0
点赞
踩
1

收藏

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

话不多说，直接上代码。<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title> <script src="js/jquery-3.2.1.js"></script></head><body> <select name="" id="selProvince">
复制链接

扫一扫