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>
js二级联动
原文地址:https://www.cnblogs.com/zhhy/p/10279046.html