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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
用cssText批量修改样式
2009/08/29 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
python对数组进行反转的方法
2015/05/20 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python实现五子棋游戏
2019/06/18 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
当当网软件测试笔试题
2015/11/24 面试题
研究生求职自荐书
2014/06/23 职场文书
旷课检讨书范文
2014/10/30 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书