智睿软件_技术交流论坛综合站长Web页面设计 → 如何用js通过下拉菜单来实现div的隐藏和显示


  共有12569人关注过本帖平板打印

主题:如何用js通过下拉菜单来实现div的隐藏和显示

帅哥哟,离线,有人找我吗?
zhirui
  1楼 个性首页 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:管理员 帖子:520 积分:8740 威望:0 精华:5 注册:2009-07-07
如何用js通过下拉菜单来实现div的隐藏和显示  发帖心情 Post By:2015-12-18 09:47:28

思路:利用value属性获取下拉菜单的选项→根据选项决定div的状态→利用style.display样式隐藏或显示div。实例演示如下:

1、HTML结构

<select id="test_select">
<option value="1">显示</option>
<option value="2">隐藏</option>
</select>
<div id="test">我是一个div么呀我是一个div</div>

2、javascript代码

window.onload = function(){
var obj_select = document.getElementById("test_select");
var obj_div = document.getElementById("test");
obj_select.onchange = function(){
obj_div.style.display = this.value==1? "block" : "none";
}
}

考试管理系统,适合中小学校,驾校,技术认证考试 支持(2中立(0反对(0回到顶部