JS实现的简单下拉框联动功能示例


Posted in Javascript onMay 11, 2018

本文实例讲述了JS实现的简单下拉框联动功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS下拉联动</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == 'en'){
    var sec = document.getElementById('second');
    sec.innerHTML = "<option>one</option><option>two</option>";
  }else{
    var sec = document.getElementById('second');
    sec.innerHTML = "<option>一</option><option>二</option>";
  }
}
</script>
</head>
<body>
<div>
  <select id="first" onchange="setSecond(this)">
    <option value="en">en</option>
    <option value="zh">zh</option>
  </select>
</div>
<div>
  <select id="second">
  </select>
</div>
</body>
</html>

使用在线HTML/JS/css运行工具http://tools.3water.com/code/HtmlJsRun,简单效果图如下:

JS实现的简单下拉框联动功能示例

使用innerHTML,IE浏览器不支持这种方法的,所以改进方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS下拉联动</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == 'en'){
    var sec = document.getElementById('second');
    sec.options[0] = new Option("one","one");
    sec.options[1] = new Option("two","two");
  }else{
    var sec = document.getElementById('second');
    sec.options[0] = new Option("一","one");
    sec.options[1] = new Option("二","two");//可设置循环配置,也可一个一个配置
  }
}
</script>
</head>
<body>
<div>
  <select id="first" onchange="setSecond(this)">
    <option value="en">en</option>
    <option value="zh">zh</option>
  </select>
</div>
<div>
  <select id="second">
  </select>
</div>
</body>
</html>

可以兼容火狐,IE等

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 命名空间以提高代码重用性
Nov 13 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 #Javascript
node前端开发模板引擎Jade的入门
May 11 #Javascript
Node.js 使用jade模板引擎的示例
May 11 #Javascript
Node.js Express安装与使用教程
May 11 #Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 #Javascript
Node.js引入UIBootstrap的方法示例
May 11 #Javascript
Node.js使用Angular简单示例
May 11 #Javascript
You might like
php 动态添加记录
2009/03/10 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
js倒计时显示实例
2016/12/11 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
浅析Python中的多进程与多线程的使用
2015/04/07 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Python定时器实例代码
2017/11/01 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
高级Java程序员面试题
2016/06/23 面试题
口头翻译求职人自荐信
2013/12/07 职场文书
代理班主任的自我评价
2014/02/04 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
教师求职简历自我评价
2015/03/10 职场文书
自荐信模板大全
2015/03/27 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
高三物理教学反思
2016/02/20 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Python的这些库,你知道多少?
2021/06/09 Python
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
python多次执行绘制条形图
2022/04/20 Python