在web页面中，经常需要使用select控件来显示div的显示与隐藏，实现这个方法主要用到了setAttribute方法，以下为示例代码：<html>
<title>通过选择项显示不同的结果</title>
<head>
<script type="text/JavaScript">
function showdiv()
{
var doc=document;
var citytext=doc.getElementById("city").value;
var div1=doc.getElementById("div1");
var div2=doc.getElementById("div2");
var div3=doc.getElementById("div3");
switch (citytext)
{
case "广州":
div1.setAttribute("style","display");
div2.setAttribute("style","display:none");
div3.setAttribute("style","display:none");
doc.getElementById("text1").value=citytext;
break;
case "南昌":
div1.setAttribute("style","display:none");
div2.setAttribute("style","display");
div3.setAttribute("style","display:none");
doc.getElementById("text2").value=citytext;
break;
case "沈阳":
div1.setAttribute("style","display:none");
div2.setAttribute("style","display:none");
div3.setAttribute("style","display");
doc.getElementById("text3").value=citytext;
break;
}
}
</script>
</head>
<body>
<select title="城市" id="city" onchange="showdiv()">
<option selected value="广州">广州</option>
<option value="南昌">南昌</option>
<option value="沈阳">沈阳</option>
</select>
<div id="div1" style="display:none" >您选择了广东的省会<input type="text" id="text1" value=""/></div>
<div id="div2" style="display:none" >您选择了江西的省会<input type="text" id="text2" value=""/></div>
<div id="div3" style="display:none" >您选择了辽宁的省会<input type="text" id="text3" value=""/></div>
</body>
</html>
分享到：
相关推荐
JS实现各种动态显示隐藏div效果，包括卷动显示隐藏效果，渐变显示隐藏效果，大小缩放显示隐藏效果
使用JQUERY做的一个页面DIV动态隐藏 显示 点击+号图片后 DIV会自动隐藏 点击-号图片后 DIV会自动显示 隐藏的DIV区域内的控件值后台仍可以取得到，当页面刷新时，也不会改变隐藏区域的隐藏状态 使用JQUERY将页面状态...
jquery和js分别可以实现对div的隐藏和显示，方法也不一样，jquery的show、show;js的hidden、visible
一个简单动态js，月历活动功能，鼠标移动，显示或隐藏div.
61. js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62. Supersized jQuery全屏相册图片自动切换插件 63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]...
// 绑定高度并获得当前隐藏keys（获得当前事件的下一个元素） /** * 显示状态和模块 ...* 动态创建层并添加显示内容 改分页 */ /** * DWR 提交 */ /** * 分页函数 */ /** * 验证 */
<!...<...<head> <... charset=gb2312" /> ...link href="css/style.css" type="text/css" rel="stylesheet" />...if (parent.document....<div margin-top:250px;"> </div> </body> </html>
今日，怂怂就来说说，在项目中刚遇到这么一个功能需求； 描述：当下拉选择不同的属性选项，...代码实现 vue.js： //定义一个select下拉菜单 类型> 表结构变更 value=tableChange> <el-option label=接口变更 va
使用javascript全动态生成的计算器，调用内置eval函数能实现简单表达式的计算，js文件可以供其他程序在任意处调用动态生成计算器，本实例界面为浮动div可以在浏览器中显示，隐藏和任意拖动 (IE8 调试通过，其他...
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
29.用JS实现一个id为book的div的显示和隐藏（1分） .解释evel函数 （1分） evel函数可以接受一个字符串作为参数，并把此字符串当做一段javascript代码去执行，如果字符串执行结果是一个值则返回此值，否则返回...
13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 ...
11.7 隐藏和显示层 219 11.8 移动文档中的对象 221 11.9 日期方法 223 第12章 JavaScript应用示例 225 12.1 使用可折叠菜单 225 12.2 添加下拉菜单 228 12.3 改进下拉菜单 230 12.4 带说明的幻灯片...
13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 ...
12，DIV层相关（拖拽、显示、隐藏、移动、增加） 13，TABLAE相关(客户端动态增加行列，模拟进度条，滚动列表等) 14，各种<object classid=>相关类，如播放器，flash与脚本互动等 16, 刷新/模拟无刷新 异步...
1.3.3 使用代码隐藏页面 24 1.3.4 处理页面事件 27 1.3.5 使用Page.IsPostBack属性 29 1.3.6 调试和跟踪ASP.NET页面 30 1.3.7 跟踪页面执行 33 1.4 安装ASP.NET Framework 35 1.5 小结 37 第2章 使用标准控件 38 ...
本实例主要是在JavaScript中，动态改变<div>标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单。其实，每一个一级菜单下的二级菜单内容是已经添加在网页的<div>标签中，只是此时设置了<div>不...
实例016 动态显示窗口 29 实例017 慢慢放大的窗口 30 实例018 下降式浏览器 32 实例019 旋转的窗口 33 实例020 移动的窗口 34 实例021 震动的窗口 35 实例022 弹出广告窗口 36 1.4 窗口控制 37 实例023 窗口始终在最...
另外，我计划为每个参考的摘要添加自动显示/隐藏切换功能（如果填写了bibtex引文的抽象字段）。 要使用它，请将您的bibtex引用放在template.html中的“ bibtex_input” div中。 如果要从服务器上的文件加载bibtex...
代码如下: <div><a>1</a></div> <div id=”1.1″> <div> <a>1.1</a></div> </div> 这就出现两次类别了，点父级显示（隐藏）子级菜单，JS代码也就一句话： 代码如下: function news_pro(o) { var obj=document....