js实现两个单选按钮,选不同的选项弹出显示不同的下拉框
2016-06-23 10:35
711 查看
<!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>无标题文档</title> </head> <body> <script type="text/javascript"> function switchItem(tag){ var s1 = document.getElementById('s1'); var s2 = document.getElementById('s2'); var s3 = document.getElementById('s3'); if(tag=='外单位'){ s1.style.display = ''; s2.style.display = 'none'; s3.style.display = 'none'; } else{ s1.style.display = 'none'; s2.style.display = ''; s3.style.display = ''; } } </script> <div> <label><input type="radio" onclick="switchItem('外单位')" name="radio" />外单位</label> <label><input type="radio" onclick="switchItem('本单位')" name="radio" />本单位</label> </div> <div> <select id="s1" style="display:none"> <option>外单位A1</option> <option>外单位A2</option> <option>外单位A3</option> </select> </div> <div> <select id="s2" style="display:none"> <option>本单位A1</option> <option>本单位A2</option> <option>本单位A3</option> </select> <select id="s3" style="display:none"> <option>本单位B1</option> <option>本单位B2</option> <option>本单位B3</option> </select> </div> </body> </html>
相关文章推荐
- js获取项目根路径
- JS刷新当前页面的几种方法总结
- js 弹出子页面与关闭子页面刷新父页面的问题
- json简介
- Extjs tree树的方法和配置项
- JS使用JSON作为参数实例分析
- JSR303中的来验证数据信息
- HTML5 Server-Sent Events with JSP example
- 【JavaScript】内置对象
- 【JavaScript】变量和基本包装类型
- JS判断当前浏览器来自PC或者手机
- JSP 弹出对话框的方式总结
- JavaScript 加载顺序和异步加载详解
- jseclipse 是eclipse插件,让你编写js代码感觉更爽
- javascript新窗口打开链接window.open()被阻拦的解决办法
- jackson json 转list/map
- Javascript 数组循环遍历之forEach
- Extjs中的迭代方法
- 关于js在html中执行顺序的问题
- js中遍历Map对象