jquery 无限级联下拉框

有的时候需要某个东西，然后又得不到资源来帮助你，只能自己动手丰衣足食了，查遍网上各种jquery的级联下拉框都不和我意，而且实现比较复杂，故自己动手实现。

 

<div>
<select class="root">
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
<option value="4">four</option>		
</select>
</div>
<script type="text/javascript"  src="jquery-1.4.2.min.js">
</script>

<script>
	function changeChild(obj){
	
	//例子数据，可以直接走Ajax取回数据
	var json=[
			{"id":1,
		 	"name":"first"
			},
			{"id":2,
			"name":"second"
			},
			{"id":3,
		 	"name":"third"
			}
			];

	//获得当前选中的下拉框的值
	var selectValue = obj.val();
		
	//变动之前首先将其同后代都删除
	obj.nextAll().remove();
	var str = $("<select onchange='changeChild($(this))'></select>");
	var option = "";
	//构造option内容
	$.each(json,function(i,n){  
                    option+= '<option value="'+n.id+'">'+n.name+"</option>\n";  
	    });

       //构造新的select对象	
       var temp=$(str).html(option);
       //将新的select插入到当前元素的后面，作为兄弟节点
	obj.after(temp);  
}

$(".root").change(function(){  
        changeChild($(this));  
 });  
</script>

	    

 

 

参考：

1：jquery插件实现无限级级联下拉框

http://www.iteye.com/topic/983283

 

2：jQuery为动态生成的select元素添加事件

http://www.cnblogs.com/lvlin/archive/2009/07/31/1536098.html

 

3：jQuery 教程

http://www.w3school.com.cn/jquery/