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 入门基础学习
Mar 10 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
Swiper实现导航栏滚动效果
Oct 16 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并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python文件操作整理汇总
2014/10/21 Python
python实现中文输出的两种方法
2015/05/09 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Python PIL库图片灰化处理
2020/04/07 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
金山毒霸系列的笔试题
2013/04/13 面试题
大学生全国两会报告感想
2014/03/17 职场文书
党在我心中演讲稿
2014/09/02 职场文书
中学生打架检讨书
2014/10/13 职场文书
运动会开幕词
2015/01/28 职场文书
门球健将观后感
2015/06/16 职场文书
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库