js实现HTML中Select二级联动的实例


Posted in Javascript onJanuary 05, 2018

效果图

js实现HTML中Select二级联动的实例

选择后

js实现HTML中Select二级联动的实例

js代码

<script language="javascript" type="text/javascript">
 //定义 费用科目 数据数组
  fylxArray = new Array();
  fylxArray[0] = new Array("","");
  fylxArray[1] = new Array("汽车费用","汽油费|过路费|修理费");
  fylxArray[2] = new Array("房屋租赁费","分公司及办事处房租|宿舍房租|项目房租");
  fylxArray[3] = new Array("差旅费用","餐费|住宿费|交通费");
  fylxArray[4] = new Array("招待费","招待费");
  fylxArray[5] = new Array("办公费","办公用品费|办公费");
  fylxArray[6] = new Array("交通费","交通费");
  fylxArray[7] = new Array("物业费","物业费");
  fylxArray[8] = new Array("租车费","租车费");
  fylxArray[9] = new Array("劳务费","劳务费");
  fylxArray[10] = new Array("通讯费","通讯费");
  fylxArray[11] = new Array("水费","水费");
  fylxArray[12] = new Array("电费","电费|职工福利费");
  fylxArray[13] = new Array("会议费","会议费");
  fylxArray[14] = new Array("中介服务费","审计费|律师费|券商费|其他");
  fylxArray[15] = new Array("快递费","快递费");
  fylxArray[16] = new Array("招聘费","招聘费");
  fylxArray[17] = new Array("加班餐费","加班餐费");
  fylxArray[18] = new Array("投标费用","投标报名费|购买标书费");
  fylxArray[19] = new Array("打印装订费","打印费|装订费|文件制作费");
  fylxArray[20] = new Array("广告宣传费","展位费|广告费|设计费|印刷费");
  fylxArray[21] = new Array("中标服务费","中标服务费");
  fylxArray[22] = new Array("专家咨询费","专家咨询费");
  fylxArray[23] = new Array("培训费","培训费");
  fylxArray[24] = new Array("打印费","打印费");
  fylxArray[25] = new Array("职工福利费","职工福利费");
  fylxArray[26] = new Array("暖气费","暖气费");
  fylxArray[27] = new Array("燃气费","燃气费");
  fylxArray[28] = new Array("产检费","产检费");
  fylxArray[29] = new Array("生育住院费","生育住院费");
  fylxArray[30] = new Array("生育津贴","生育津贴");
  fylxArray[31] = new Array("医疗保险费","医疗保险费");
  fylxArray[32] = new Array("其他","其他");
  //select 二级联动
  function getChild(currFylx){
    //当前 所选择 的费用类型
    var currFylx_value = currFylx.options[currFylx.selectedIndex].value;
    var currFylxid=currFylx.id.substr(0,6)
    //清空 费用科目 下拉选单
    //var currOption= document.getElementById(currFylxid+'_fykm')
    var currOption= $(currFylx).parent().next().children()[0]
    currOption.length=0
    for (var i = 0 ;i <fylxArray.length;i++){
      //得到 当前费用类型 在 费用科目数组中的位置
      if(fylxArray[i][0]==currFylx_value){
        //得到 当前费用类型 下的费用科目
        var tmpfykmArray = fylxArray[i][1].split("|")
        for(var j=0;j<tmpfykmArray.length;j++){
          //填充 费用科目 下拉选单
          currOption.options[currOption.length] = new Option(tmpfykmArray[j],tmpfykmArray[j]);
        }
      }  
    }
  }
</script>

页面代码

<td class="ff"><select style="width:100px" name="select_name" onChange = "getChild(this)">
<option value="">--无--</option>
<option value="汽车费用">汽车费用</option>
<option value="房屋租赁费">房屋租赁费</option>
<option value="差旅费用">差旅费用</option>
<option value="招待费">招待费</option>
<option value="办公费">办公费</option>
<option value="交通费">交通费</option>
<option value="物业费">物业费</option>
<option value="租车费">租车费</option>
<option value="劳务费">劳务费</option>
<option value="通讯费">通讯费</option>
<option value="水费">水费</option>
<option value="电费">电费</option>
<option value="会议费">会议费</option>
<option value="中介服务费">中介服务费</option>
<option value="快递费">快递费</option>
<option value="招聘费">招聘费</option>
<option value="加班餐费">加班餐费</option>
<option value="投标费用">投标费用</option>
<option value="打印装订费">打印装订费</option>
<option value="广告宣传费">广告宣传费</option>
<option value="中标服务费">中标服务费</option>
<option value="专家咨询费">专家咨询费</option>
<option value="培训费">培训费</option>
<option value="打印费">打印费</option>
<option value="职工福利费">职工福利费</option>
<option value="暖气费">暖气费</option>
<option value="燃气费">燃气费</option>
<option value="产检费">产检费</option>
<option value="生育住院费">生育住院费</option>
<option value="生育津贴">生育津贴</option>
<option value="医疗保险费">医疗保险费</option>
<option value="其他">其他</option>
</select></td><!--费用类型-->
<td class="ff"><select style="width:100px" ><option>--无--</option></select></td><!--费用科目-->

以上这篇js实现HTML中Select二级联动的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
vue实现搜索过滤效果
May 28 Javascript
js实现小星星游戏
Mar 23 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
详解tween.js 中文使用指南
Jan 05 #Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 #Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 #Javascript
vue 中directive功能的简单实现
Jan 05 #Javascript
浅谈React前后端同构防止重复渲染
Jan 05 #Javascript
使用vue实现grid-layout功能实例代码
Jan 05 #Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 #Javascript
You might like
如何给phpadmin一个保护
2006/10/09 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
python3编码问题汇总
2016/09/06 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python实现最大优先队列
2019/08/29 Python
常用的10个Python实用小技巧
2020/08/10 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
Python高并发和多线程有什么关系
2020/11/14 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
家庭贫困证明
2014/09/23 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
python绘制云雨图raincloud plot
2022/08/05 Python