比较简单和理解的下拉框联动实现

公司做项目的时候，需要有这样的功能，看到时间比较充裕，就没去找demo自己去想方法写了。纯自己的想法，有些可能比较弱智，希望不要见笑。

下拉框联动最好是不要用ajax去局部刷新，虽然这样的方法比较简便，可是每点一次就访问服务器，感觉性能上不是特别理想。

来看看我是怎么写的吧：

1：html上的标签，当然你为空也行。。

     <div>
    	<span>下拉框联动1</span>
    	<select id="s1" onchange="setSelect2();" >
        	<option value="1" >1111</option>
            <option value="2" >2222</option>
            <option value="3" >3333</option>
        </select>
        <span>下拉框联动2</span>
    	<select id="s2" onchange="setSelect3();" >
        	<option value="1" >1111</option>
            <option value="2" >2222</option>
            <option value="3" >3333</option>
        </select>
        <span>下拉框联动3</span>
    	<select id="s3" >
        	<option value="1" >1111</option>
            <option value="2" >2222</option>
            <option value="3" >3333</option>
        </select>
    </div>

</pre><pre>

2：就是数据源了，我感觉最关键的就是这些数据，他的排列啥的。理解了这个就不难了。

<span style="white-space:pre">		</span>var allData = {};//所有的数据集合
		
		var setParent = {1:"游戏",2:"音乐",3:"电影"}; //设置父级数据
		
		//设置子级数据 key值对应父级的
		var setChild = {
				1:{1:"竞技游戏",2:"娱乐游戏",3:"网络游戏"},
				2:{1:"默",2:"晴天",3:"我怀念的"},
				3:{1:"动画电影",2:"科幻电影",3:"恐怖电影"}
			};
			
		//设置3级子级数据,key值对应父级的，value里面的键对应着上级子级的value键值
		var setChildCh = {
				1:{
					1:{1:"英雄联盟",2:"魔兽争霸",3:"星际争霸",4:"CS"},
					2:{1:"连连看",2:"斗地主"},
					3:{1:"剑灵",2:"上古世纪",3:"斗战神"}
					},
				3:{
					1:{1:"大圣归来",2:"魁拔3",3:"汽车总动员"},
					2:{1:"明日边缘",2:"侏罗纪世界"}
					}
			};

<span style="white-space:pre">		</span>//把所有数据都丢在一个map里面，这样可以看做这个map是从后台获取到的。然后直接赋值就好
		allData.parent = setParent;
		allData.child = setChild;
		allData.childCh = setChildCh;

这些数据只要理解前面两个就好了，key值用数字是为了更好的跟数据库的id对应。后台怎么才能获得这样的数据json呢？

这个逻辑不难，相信动动脑子就可以

3：就是3个set方法，很简单

<span style="white-space:pre">		</span>//设置第一个下拉框
		function setSelect1(){
			
			document.getElementById("s1").options.length=0; //清除下拉框
			
			for (var key in allData.parent){
				document.getElementById("s1").options.add(new Option(allData.parent[key],key));//参数1是text显示的，参数2是value值
			}
			setSelect2();
		}
		
		//设置第二个下拉框
		function setSelect2(){
			
			document.getElementById("s2").options.length=0; //清除下拉框
			
			var valuePar = document.getElementById("s1").value;//获得父级选中的值
			
			for (var key in allData.child){
				if(key == valuePar){
					for (var keyc in allData.child[key]){
						document.getElementById("s2").options.add(new Option(allData.child[key][keyc],keyc));
					}
				}
			}
			setSelect3();
		}
		
		//设置第三个下拉框
		function setSelect3(){
			
			document.getElementById("s3").options.length=0; //清除下拉框
			
			var valuePar = document.getElementById("s1").value;//获得父级选中的
			
			var par = document.getElementById("s2").value; //获得上一级选中的
			
			for (var key in allData.childCh){
				if(key == valuePar){
					for (var keyc in allData.childCh[key]){
						if(keyc == par){
							for (var keycc in allData.childCh[key][keyc]){
								document.getElementById("s3").options.add(new Option(allData.childCh[key][keyc][keycc],keycc));
							}
						}
					}
				}
			}
		}

页面加载的时候给allData数据（后台获得数据），然后加载 setSelect1()方法就好了。真正做起来没有想象的那么难。源代码我也上传了。

比较简单和理解的下拉框联动实现

猜你喜欢