首页 > 代码库 > 下拉菜单 ,三级联动 ,夹其它下拉菜单

下拉菜单 ,三级联动 ,夹其它下拉菜单

<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=http://www.mamicode.com/‘伊兰特汽油‘>伊兰特汽油");
    }else if($(this).val()==‘分车龄车辆能耗‘){
        $("#carfl").show();
        $("#twoselect").empty();
        $("#twoselect").append("<option value=http://www.mamicode.com/‘1年‘>1年");
        
    }else if($(this).val()==‘分时间段车辆能耗‘){
        $("#carfl").show();
        $("#twoselect").empty();
        $("#twoselect").append("<option value=http://www.mamicode.com/‘0-7点‘>0-7点");
        
    }else{
        $("#carfl").hide();
    }
})
                    </script>

技术分享

下拉菜单 ,三级联动 ,夹其它下拉菜单