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 开发规范要求(图文并茂)
Jun 11 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
JS实现随机抽取三人
Nov 06 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
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静态类的原罪详解
2013/05/06 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
php cli换行示例
2014/04/22 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
JS中数组重排序方法
2016/11/11 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python调用外部程序的实操步骤
2019/03/04 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
大学生自我鉴定书
2014/03/24 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
社区党支部承诺书
2015/04/29 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL