jQuery实现省市二级联动

主要实现流程:
步骤分析
1.设置加载页面函数事件
2.在里面获取select的id并且设置下拉事件并且绑定函数
3.定义2维数组存放相应的城市
4.遍历2维数组省份 并且使用if判断 点击时的this.value值 如果值与省份(二位数组下标)值一致则遍历二位数组相应的一维数组(城市)
5.在次过程中 设置添加子节点appead( “+n+”)
代码实现:


```javascript
<script src="../js/jquery-1.8.3.js"></script>
		<script>
		//2.定义数组
			var cityes = new Array(3);
			//再定义4个一维数组给上一个数组
			cityes[0] = new Array("武汉", "黄冈", "荆州", "黄石");
			cityes[1] = new Array("长沙", "岳阳", "株洲", "常德");
			cityes[2] = new Array("邯郸", "保定", "石家庄", "廊坊");
			cityes[3] = new Array("郑州", "开封", "信阳", "洛阳");
			$(function(){
     
				//1.获取事件点击下拉
			$("#province").change(function(){
     
					//获取当前操作对象点击下拉的值
					var proValue = this.value;
					$("#city").html("");
					$.each(cityes,function(i,n){
     
						//遍历数组如果数组的下标等于当前的点击value值的话
						//就进行节点添加操作
						if(proValue==i){
     
							$.each(cityes[i],function(i,n){
     
							$("#city").append("+n+"");
							});	
						}
							});
					})
				});
			

实现图:
jQuery实现省市二级联动_第1张图片


你可能感兴趣的:(web前端)