javascript实现无限级联动

那些雨后的故事

于 2015-01-23 11:03:49 发布

阅读量940

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u011003813/article/details/43052759

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

近来闲来无聊，朋友让帮写个三级联动索性就写了一个可以实现无限组联动的方式，希望可以帮到大家

不废话贴代码：

html代码

 <body οnlοad="load();">
	<select name="first" id="first" οnchange="changes(this,1);">
		<option value="-1" selected>请选择</option>
	</select>

	<select name="two" id="two" οnchange="changes(this,2);">
		<option value="-1" selected>请选择</option>
	</select>

	<select name="three" id="three">
		<option value="-1" selected>请选择</option>
	</select>
 </body>

js代码

	var json = [{"key":"1","parent":"","name":"1"},{"key":"2","parent":"","name":"2"},{"key":"3","parent":"","name":"3"},
				{"key":"11","parent":"1","name":"11"},{"key":"12","parent":"1","name":"12"},{"key":"13","parent":"1","name":"13"},
				{"key":"21","parent":"2","name":"21"},{"key":"22","parent":"2","name":"22"},{"key":"23","parent":"2","name":"23"},
				{"key":"31","parent":"3","name":"31"},{"key":"32","parent":"3","name":"32"},{"key":"33","parent":"3","name":"33"},

				{"key":"111","parent":"11","name":"111"},{"key":"112","parent":"11","name":"112"},{"key":"113","parent":"11","name":"113"},
				{"key":"121","parent":"12","name":"121"},{"key":"122","parent":"12","name":"122"},{"key":"123","parent":"12","name":"123"},
				{"key":"131","parent":"13","name":"31"},{"key":"132","parent":"13","name":"132"},{"key":"133","parent":"13","name":"133"}
				];

	//初始化加载
	function load(){
		var first = document.getElementById("first");
		for(var i in json){
			if(json[i].parent == ""){
				first.options.add(new Option(json[i].key,json[i].name)); //这个兼容IE与firefox 
			}
		}
	}

	//公用change
	function changes(obj,num){
		var index = obj.selectedIndex;
		index = obj.options[index].value;
		var cas;
		if(num == 1){
			//第一级联动
			cas = document.getElementById("two");
		}else if(num == 2){
			//第二级联动
			cas = document.getElementById("three");
		}
		//......无限级

		//清除之前数据
		cas.options.length = 1;
		for(var i in json){
			if(json[i].parent == index){
				cas.options.add(new Option(json[i].key,json[i].name)); //这个兼容IE与firefox 
			}
		}
	}