智睿系统官方论坛综合站长Web页面设计 → 如何用js通过下拉菜单来实现div的隐藏和显示


  共有1915人关注过本帖树形打印

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

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


加好友 发短信
等级:管理员 帖子:517 积分:8572 威望: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回到顶部