<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=" 100px;"> <select class="m-wrap wid200" style=" 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>
