js二级联动

Posted 2021-02-03 博客一族

html页面代码

<select id="tableType" name="tableType" class="select" onchange="changeSelect(this.selectedIndex)" style="width:100%;color:#3C3C3C;">
                                    <option value="0" selected>投诉</option>
                                    <option value="1">意见</option>
                                    <option value="2">举报</option>
                                    <option value="3">故障报修</option>
                                    <option value="4">服务申请</option>
                                    <option value="5">表扬</option>
                                    <option value="6">建议</option>
                                    <option value="7">业务咨询</option>
                                </select>
<select id="addTable" name="addTable" style="width:100%;color:#3C3C3C;" >
                                </select>

js代码

<script language="javascript" type="text/javascript">
/* 二级联动下拉列表 */
     var selectArray = [
                     //所有的
                     //["1","各单位各类数及总数","2","各类占比","3","同比","4","环比","5","各单位工单件数及占工单总数比例","6","本月属实、不属实工单件数及占工单总数比例","7","不同子类型工单件数","8","故障各类型件数占故障工单总数比例"],
                     
                     //投诉
                     ["1","各单位各类数及总数","2","各类占比","3","同比","4","环比","5","各单位工单件数及占工单总数比例","6","本月属实、不属实工单件数及占工单总数比例","7","不同子类型工单件数","9","本月各分公司按一级分类、二级分类、三级分类统计件数","10","本月营销类投诉、生产类投诉件数及占投诉总数比例","11","本月一类投诉件数占投诉总数比例、二类投诉件数占投诉总数比例"],
                     
                     //意见
                     ["1","各单位各类数及总数","2","各类占比","3","同比","4","环比","5","各单位工单件数及占工单总数比例","7","不同子类型工单件数"],
                     
                     //举报
                     ["1","各单位各类数及总数","2","各类占比","3","同比","4","环比","5","各单位工单件数及占工单总数比例","6","本月属实、不属实工单件数及占工单总数比例","7","不同子类型工单件数"],
                     
                     //故障
                     ["1","各单位各类数及总数","2","各类占比","3","同比","4","环比","5","各单位工单件数及占工单总数比例","7","不同子类型工单件数","8","故障各类型件数占故障工单总数比例"],
                     
                     //服务申请、建议、咨询业务、表扬
                     ["1","各单位各类数及总数","2","各类占比","3","同比","4","环比","5","各单位工单件数及占工单总数比例"]
                 ];
      //初始化下拉列表
     function initSelect(){
         changeSelect(0);
     }
     function  changeSelect(index){
         switch(index){
             case 0: break;
             case 1: break;
             case 2: break;
             case 3: break;
             case 4: break;
             case 5: index=4;
             case 6: index=4;
             case 7: index=4;
         }
        //选择对象
         var tableSelect1 = document.getElementById("tableType");
         var tableSelect2 = document.getElementById("addTable");
            tableSelect1.selectedIndex = index;
        //指定tableSelect2中<option>标记的个数
        tableSelect2.length = selectArray[index].length / 2;
         //循环将数组中的数据写入<option>标记中
        for (var i = 0;i<tableSelect2.length;i++) {
            //tableSelect2.option[i] = new Option();
            //tableSelect2.option[i].text = selectArray[index][2*i+1];
            //tableSelect2.option[i].value = selectArray[index][2*i];
            tableSelect2[i]=new Option(selectArray[index][2*i+1],selectArray[index][2*i]);
        }
    }
</script>