下拉菜单 ，三级联动 ，夹其它下拉菜单
Posted 放荡不羁的春天
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉菜单 ，三级联动 ，夹其它下拉菜单相关的知识，希望对你有一定的参考价值。
<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>
以上是关于下拉菜单 ，三级联动 ，夹其它下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章