标签：
比如省市，或者是别的有层次关系的都可以用，先引进jquery，再定义数据，格式是json数据，parDepId是指父id
<script type="text/javascript" src="/assets/js/jquery-1.8.1.min.js"></script>
<script language="javascript">
var jsonList = new Array();
var jo = {"id":"11","name":" 皮肤神经外科","parDepId":"5"};
jsonList.push(jo);
var jo = {"id":"10","name":"骨神经外科","parDepId":"5"};
jsonList.push(jo);
var jo = {"id":"8","name":"小儿不呼吸内科","parDepId":"9"};
jsonList.push(jo);
var jo = {"id":"7","name":"小儿bu消化内科","parDepId":"3"};
jsonList.push(jo);
var jo = {"id":"6","name":"小儿消化内科","parDepId":"2"};
jsonList.push(jo);
var jo = {"id":"9","name":"呼吸内科","parDepId":"1"};
jsonList.push(jo);
var jo = {"id":"4","name":"外科","parDepId":"0"};
jsonList.push(jo);
var jo = {"id":"5","name":"神经外科","parDepId":"4"};
jsonList.push(jo);
var jo = {"id":"3","name":"bu消化内科","parDepId":"1"};
jsonList.push(jo);
var jo = {"id":"2","name":"消化内科","parDepId":"1"};
jsonList.push(jo);
var jo = {"id":"1","name":"内科","parDepId":"0"};
jsonList.push(jo);
for(var i=0;i<jsonList.length;i++){
//alert(jsonList[i].id+‘,‘+jsonList[i].name+‘,‘+jsonList[i].parDepId);
if(jsonList[i].parDepId==‘0‘){
$("#s1").append("<option value="+jsonList[i].id+">"+jsonList[i].name+"</option>");
}
}
</script>
接着定义html元素，由于是放在bui中的格式，所以这里的class除了select是无具体意义用于选择的外，其他都是具体的样式。不过和本次记录关机不大
<div class="row"> <div class="control-group span16"> <label class="control-label"><s>*</s>科室</label> <div class="controls"> <input name="keshi" id="keshi" type="hidden" value="" class="input-normal control-text"> </div> <span id="dyna"> <select id="s1" class="dyclass" > <option value="">请选择</option> </select> </span> </div> </div>
然后定义一个函数处理联动变化
<script language="javascript"> $(function(){ $("#dyna .dyclass").live("change",function(){ var cur = $(this).find("option:selected").val(); var curid = $(this).attr("id"); var curno = curid.substring(curid.length-1,curid.lenth); //alert($(this).attr("id")+‘,‘+curno); var ttt = $(‘#‘+curid+‘ ~ .dyclass‘); ttt.remove(); var er = new Array(); for(var i=0;i<jsonList.length;i++){ //alert(jsonList[i].id+‘,‘+jsonList[i].name+‘,‘+jsonList[i].parDepId); if(jsonList[i].parDepId==cur){ er.push("<option value="+jsonList[i].id+">"+jsonList[i].name+"</option>"); } } var nextid = curno*1+1; if(er.length>0){ $(‘#dyna‘).append("<select id=s"+nextid+" class=dyclass"+"></select>"); $(‘#s‘+nextid).append("<option value=‘‘>请选择</option>"); } for(var i=0;i<er.length;i++){ $(‘#s‘+nextid).append(er[i]); } }); $("#checkme").click(function(){ //var result = ; alert($(‘#dyna select:last‘).find("option:selected").val()); }) }) </script>
后面的checkme是用来最后取值的，效果就是构建了一棵树之后只能选择叶子节点，选择到了叶子节点后面的select元素就没了，如果还不是叶子节点，后面就会动态生成一个请选择的select元素。注意的地方就是live和计算的时候*1+1，因为+号被javaScript解释成了连接符号了。
精简一下的话，一个较短的函数就解决了这个问题，还是比较满意的。
标签：
原文地址：http://www.cnblogs.com/azul0906/p/4245340.html
