下拉菜單 ，三級聯動 ，夾其它下拉菜單
阿新 • • 發佈：2017-07-04
ray document fun margin left 技術分享 show group mar
<form name="form1" method="" action=""> <div class="control-group margin-bottom-10"> <div class="controls"> <lable class="floatleft driverlab">分類:</lable> <div class="input-prepend floatleft"> <span class="add-on linehigt25"><i class="icon-th-list"></i></span> <select class="m-wrap wid200" name="rootid" id="rootid" > <option value="">請選擇</option> </select> </div> </div> </div> <div class="clearfix"></div> <div class="control-group margin-bottom-10"> <div class="controls"> <lable class="floatleft driverlab">名稱:</lable> <div class="input-prepend floatleft"> <span class="add-on linehigt25"><i class="icon-tasks"></i></span> <select class="m-wrap wid200" id="oneselect" name="oneselect" > <option value="">請選擇</option> </select> </div> </div> </div> <div class="clearfix"></div> <!--名稱下的分車型、分車齡、分時間段的選擇--> <div class="control-group margin-bottom-10 " id="carfl" style="display: none;"> <div class="controls"> <lable class="floatleft driverlab"></lable> <div class="input-prepend floatleft"> <span class="add-on linehigt25"><i class="icon-tasks"></i></span> <select class="m-wrap wid200" id=‘twoselect‘ name="twoselect"> <option>請選擇</option> </select> </div> </div> </div> <div class="clearfix"></div> <div class="control-group margin-bottom-10"> <div class="controls"> <lable class="floatleft driverlab">值 : </lable> <div class="input-prepend floatleft"> <span class="add-on linehigt25"><i class="icon-info-sign"></i></span> <input type="text" value="" id="inputIcon" class="m-wrap wid200"style="width: 100px;"> <select class="m-wrap wid200" style="width: 100px; margin-left: 5px;" id="threeselect" name="threeselect"> <option value="">請選擇</option> </select> </div> </div> </div> <div class="clearfix"></div> </form>
<script> // 新增指標js 的select function CLASS_LIANDONG_YAO(array) { //數組，聯動的數據源 this.array=array; this.indexName=‘‘; this.obj=‘‘; //設置子SELECT // 參數：當前onchange的SELECT ID，要設置的SELECT ID this.subSelectChange=function(selectName1,selectName2) { //try //{ var obj1=document.all[selectName1]; var obj2=document.all[selectName2]; var objName=this.toString(); var me=this; obj1.onchange=function() { me.optionChange(this.options[this.selectedIndex].value,obj2.id) } } //設置第一個SELECT // 參數：indexName指選中項,selectName指select的ID this.firstSelectChange=function(indexName,selectName) { this.obj=document.all[selectName]; this.indexName=indexName; this.optionChange(this.indexName,this.obj.id) } // indexName指選中項,selectName指select的ID this.optionChange=function (indexName,selectName) { var obj1=document.all[selectName]; var me=this; obj1.length=0; obj1.options[0]=new Option("請選擇",‘‘); for(var i=0;i<this.array.length;i++) { if(this.array[i][1]==indexName) { // alert(this.array[i][1]+" "+indexName); obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]); } } } } ; //例子1------------------------------------------------------------- //數據源 var array=new Array(); array[0]=new Array("企業能耗指標","root","企業能耗指標"); //數據格式 ID，父級ID，名稱 array[1]=new Array("運行車輛能耗指標","root","運行車輛能耗指標"); array[2]=new Array("非運營能耗指標","root","非運營能耗指標"); array[3]=new Array("企業能耗總量","企業能耗指標","企業能耗總量"); array[4]=new Array("運營車輛能耗總量","運行車輛能耗指標","運營車輛能耗總量"); array[5]=new Array("分車型車輛能耗","運行車輛能耗指標","分車型車輛能耗"); array[6]=new Array("分車齡車輛能耗","運行車輛能耗指標","分車齡車輛能耗"); array[7]=new Array("分時間段車輛能耗","運行車輛能耗指標","分時間段車輛能耗"); array[8]=new Array("百公裏能耗","運行車輛能耗指標","百公裏能耗"); array[9]=new Array("單車能耗","運行車輛能耗指標","單車能耗"); array[10]=new Array("水消耗指標","非運營能耗指標","水消耗指標"); array[11]=new Array("電消耗指標","非運營能耗指標","電消耗指標"); array[12]=new Array("噸/標準煤","企業能耗總量","噸/標準煤"); array[13]=new Array("L/百公裏","運營車輛能耗總量","L/百公裏"); array[14]=new Array("L/百公裏","分車型車輛能耗","L/百公裏"); array[15]=new Array("L/百公裏","分車齡車輛能耗","L/百公裏"); array[16]=new Array("L/百公裏","分時間段車輛能耗","L/百公裏"); array[17]=new Array("L/百公裏","百公裏能耗","L/百公裏"); array[18]=new Array("L/百公裏","單車能耗","L/百公裏"); array[19]=new Array("噸","水消耗指標","噸"); array[20]=new Array("度","電消耗指標","度"); //-------------------------------------------- //這是調用代碼 var liandong=new CLASS_LIANDONG_YAO(array) //設置數據源 liandong.firstSelectChange("root","rootid"); //設置第一個選擇框 liandong.subSelectChange("rootid","oneselect"); //設置子級選擇框 liandong.subSelectChange("oneselect","threeselect"); //<!--名稱下的分車型、分車齡、分時間段的選擇--> $("#oneselect").bind("change",function(){ if($(this).val()==‘分車型車輛能耗‘){ $("#carfl").show(); $("#twoselect").empty(); $("#twoselect").append("<option value=‘伊蘭特汽油‘>伊蘭特汽油</option><option value=‘伊蘭特CNG‘>伊蘭特CNG</option><option value=‘B50汽油‘>B50汽油</option><option value=‘凱美瑞混合動力‘>凱美瑞混合動力</option>"); }else if($(this).val()==‘分車齡車輛能耗‘){ $("#carfl").show(); $("#twoselect").empty(); $("#twoselect").append("<option value=‘1年‘>1年</option><option value=‘2年‘>2年</option><option value=‘3年‘>3年</option><option value=‘4年‘>4年</option><option value=‘5年‘>5年</option><option value=‘6年‘>6年</option><option value=‘7年‘>7年</option><option value=‘8年‘>8年</option>"); }else if($(this).val()==‘分時間段車輛能耗‘){ $("#carfl").show(); $("#twoselect").empty(); $("#twoselect").append("<option value=‘0-7點‘>0-7點</option><option value=‘7-9點‘>7-9點</option><option value=‘9-17點‘>9-17點</option><option value=‘17-19點‘>17-19點</option><option value=‘19-24點‘>19-24點</option>"); }else{ $("#carfl").hide(); } }) </script>
下拉菜單 ，三級聯動 ，夾其它下拉菜單