zoukankan      html  css  js  c++  java
  • js二级联动

    html页面代码

    <select id="tableType" name="tableType" class="select" onchange="changeSelect(this.selectedIndex)" style="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="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>
    如有疑问,欢迎留言讨论。
  • 相关阅读:
    [LeetCode] Search a 2D Matrix
    CCBPM中的消息机制,CCIM服务端安装说明
    程序基石系列之C++多态的前提条件
    汇编中常见的一些错误信息
    浏览器的CSS Hacks
    易学设计模式看书笔记(7)
    [易飞]简易制程日报-月报
    js thiskeyword
    时空-问题集锦(转载)
    Delphi 组件渐进开发浅谈(二)——双简合璧
  • 原文地址:https://www.cnblogs.com/zhhy/p/10279046.html
Copyright © 2011-2022 走看看