JQuery技术初探之二级联动的设计与实现

最新推荐文章于 2019-03-12 16:32:16 发布

火焰长岛冰茶

最新推荐文章于 2019-03-12 16:32:16 发布

阅读量276

点赞数

分类专栏： Web前端文章标签： jquery

本文链接：https://blog.csdn.net/u013469562/article/details/52905246

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

距离上次的博客已经有几天没更新了，今天来回顾一下jquery并且进一步使用jquery完成常见的二级联动的网页应用场景。

框架的源码如下所示，除了如下的框架其实也可以引入json数据进一步降低代码维护的困难和耦合性，这才是开发中常用的方法，但是这里作为一个示例，选择最简单的方法进行演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		// 定义二维数组,存储城市信息
		var cities = new Array(4);
		cities[0] = new Array("市辖区");
		cities[1] = new Array("长春市","吉林市","松原市","延边市");
		cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
		cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
		cities[4] = new Array("南京市","苏州市","扬州市","无锡市");

	</script>
	<body>
		<select id="province" style="width:150px">
			<option value="">----请-选-择-省----</option>
			<option value="0">北京</option>
			<option value="1">吉林省</option>
			<option value="2">山东省</option>
			<option value="3">河北省</option>
			<option value="4">江苏省</option>
		</select>
		<select id="city" style="width:150px">
			<option value="">----请-选-择-市----</option>
		</select>
	</body>
</html>

1.分析：

（1）根据题目的要求是点击相应的省份弹出相应的市或者直辖市，需要用到一个onchange事件，在select元素下的option发生变化时为这个事件添加动作。

（2）在添加事件之后需要根据获取第一个select选框中的元素动态的添加第二个选框之中的值，同样需要利用jquery获取元素并进行添加（.html方法）

（3）完成这些步骤之后大体上已经完成了80%，需要进一步的优化代码，在添加第二个选框之前清空下拉选框中的内容并再次进行添加请选择的内容

具体的代码实现和文档说明、注释如下所示：

最后是解决的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
	<script>
		// 定义二维数组,存储城市信息
		var cities = new Array(4);
		cities[0] = new Array("市辖区");
		cities[1] = new Array("长春市","吉林市","松原市","延边市");
		cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
		cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
		cities[4] = new Array("南京市","苏州市","扬州市","无锡市");

		/*$(function(){
			//1、给province 下拉框绑定事件   change
			$("#province").change(function(){
				//1、获取选择的省的信息
				var val=$(this).val();
				//2、通过省的信息获取城市的信息
				var arr = cities[val];
				//3、each遍历
				
				//遍历之前要初始化
				var city = $("#city");
				city.html("<option value=''>----请-选-择-市----</option>");
				
				$(arr).each(function(){
					//先把要添加的信息拼接出来
					var temp = "<option>"+this+"</option>";
					//追加到city内容体的末尾
					city.append(temp);
				});
			});
		});*/
		
		
		$(function(){
			
			$("#province").change(function(){
				var index = $(this).val();
				$("#city").html("<option value=''>----请-选-择-市----</option>");
				$(cities[index]).each(function(){
					$("#city").append("<option>"+this+"</option>");
				});
			});
			
			
			
			
		});
	</script>
	<body>
		<!--
        	1、给province 下拉框绑定事件   onchange    页面加载完成时
        	
        	2、要去根据省的信息   获取城市信息
        	
        	3、遍历城市信息数组，jQuery
        	
        	4、遍历中  jQuery方式 追加内容体
        -->
		<select id="province" style="width:150px">
			<option value="">----请-选-择-省----</option>
			<option value="0">北京</option>
			<option value="1">吉林省</option>
			<option value="2">山东省</option>
			<option value="3">河北省</option>
			<option value="4">江苏省</option>
		</select>
		<select id="city" style="width:150px">
			<option value="">----请-选-择-市----</option>
		</select>
	</body>
</html>