<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>
