分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

js二级联动

发布时间:2023-09-06 02:30责任编辑:熊小新关键词:js

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved