写了一个联动select的jquery选择器

浏览数：33 / 时间：2015年06月09日

比如省市，或者是别的有层次关系的都可以用，先引进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解释成了连接符号了。
精简一下的话，一个较短的函数就解决了这个问题，还是比较满意的。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

写了一个联动select的jquery选择器