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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
js比较日期大小的方法
2015/05/12 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
人民教师求职自荐信
2014/03/12 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
投资建议书模板
2014/05/12 职场文书
银行求职信
2014/05/31 职场文书
督导岗位职责范本
2015/04/10 职场文书
素质教育学习心得体会
2016/01/19 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记