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