JS实现的简单下拉框联动功能示例
时间:2019-04-14
本文章向大家介绍JS实现的简单下拉框联动功能示例,主要包括JS实现的简单下拉框联动功能示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了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>www.jb51.net 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.jb51.net/code/HtmlJsRun,简单效果图如下:
使用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>www.jb51.net 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操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- 原来Silverlight 4中是可以玩UDP的!
- Flash/Flex学习笔记(12):FMS 3.5之如何做视频实时直播
- Flash/Flex学习笔记(11):如何检测摄像头是否被占用
- Flash/Flex学习笔记(10):FMS 3.5之Hello World!
- Swarm基于多主机容器网络-overlay networks 梳理
- 未来AI可能会淘汰180万个工作岗位,你感到恐惧了吗
- css基础:把所有背景图都集成在一张图片上,减少图片服务器请求次数
- Docker可视化界面(Consul+Shipyard+Swarm+Service Discover)部署记录
- windows 2008上启用防火墙后sqlserver 2005经常出现连接超时的解决办法
- 重温delphi之控制台程序:Hello World!
- Docker集中化web界面管理平台-Shipyard部署记录
- "Goole项目托管"及"CodePlex发布开源项目"要点
- Docker网络解决方案-Calico部署记录
- c#中开发ActiveX的学习笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring第三天:Spring的AOP的注解开发、Spring的声明式事务、JdbcTemplate
- Spring Boot中集成Slf4j 与Logback
- 一文搞定 Linux 常用高频命令
- 推荐一款科研必备的Python数据可视化神器——PyQtGraph
- 机器学习基础:可视化方式理解决策树剪枝
- 神级代码注释-这次是来搞笑的
- Gremlin 图查询概述
- JS,PHP,Python,Java对JSON数据的处理
- 基于Canal与Flink实现数据实时增量同步(二)
- Spring第四天:SSH的整合、HibernateTemplate的使用、OpenSessionInViewFilter的使用
- IDEA 下单程序多端口不同配置独立运行
- 基于Canal与Flink实现数据实时增量同步(一)
- 8848钛金手机之nacos的注册发现
- 让你git 时不再输入账号和密码
- JS 实现点击按钮复制一段文字