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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
Vue.use源码学习小结
Jun 20 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
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
js实现登录与注册界面
2017/11/01 Javascript
vue写一个组件
2018/04/09 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
Python中Proxypool库的安装与配置
2018/10/19 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python检查ping终端的方法
2019/01/26 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python绘制动态水球图过程详解
2020/06/03 Python
没编程基础可以学python吗
2020/06/17 Python
django创建css文件夹的具体方法
2020/07/31 Python
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
投资合作协议书
2014/04/17 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
个人担保书范文
2014/05/20 职场文书
社区春季防火方案
2014/06/02 职场文书
学生打架检讨书
2014/10/20 职场文书
财务工作失职检讨书
2014/11/21 职场文书
教师辞职信范文
2015/02/28 职场文书
幼儿园园长个人总结
2015/03/02 职场文书