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


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

  • 相关阅读:
    CodeForces
    CodeForces
    Simple Robot Gym
    Gym
    Java课程03总结
    Java课程03总结
    判断字符串是否回文
    Java课程02总结
    有关二进制原码、反码、补码
    Java课程01总结
  • 原文地址:https://www.cnblogs.com/dazhangli/p/7117319.html
Copyright © 2020-2023  润新知