代码之家 › 专栏 › 技术社区 › Josh Curren

隐藏/取消隐藏在IE、Safari和Chrome中不起作用的Div JavaScript函数

hide browser google-chrome internet-explorer javascript

Josh Curren · 技术社区 · 15 年前

<style> 
    .hidden { display: none; }
    .unhidden { display: block; }
</style> 

<script type="text/javascript"> 
function hideDiv(divID) {
  var item = document.getElementById(divID);
  item.className='hidden';
}

function showDiv(divID) {
  var item = document.getElementById(divID);
  item.className='unhidden';
}
</script> 

<select name="addressHomeSameAsMailing" style="width:320px; height:25px;"> 
                <option>Please Select One</option>
                <option value="Y" onClick="hideDiv('hideAddress')" <?php if( $_POST['addressHomeSameAsMailing'] == 'Y' ) echo " selected "; ?> >Yes</option>
                <option value="N" onClick="showDiv('hideAddress')" <?php if( $_POST['addressHomeSameAsMailing'] == 'N' ) echo " selected "; ?> >No</option>
</select>

1 回复 | 直到 15 年前

Pat 15 年前

onclick处理程序不一致地应用于 <option> 跨浏览器标记。为了解决这个问题,您可以将onchange处理程序添加到 <select>

HTML格式

<select name="addressHomeSameAsMailing" onchange="toggleDiv(this, 'hideAddress')">
    <option value="">Please Select One</option>
    <option value="none">Hide</option>
    <option value="block">Show</option>
</select>

<div id="hideAddress">
    123 Fake St.
</div>

Javascript语言

function toggleDiv(elem, id) {
    if (elem.value == '') return;

    var div = document.getElementById(id);
    if (div && div.style) div.style.display = elem.value;
}

你可以 see what I mean here

推荐文章

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

2 年前

Nuri Engin · 无法在Ext JS中为TreeStore实现filterBy方法?

7 年前

Faustas Butkus · jQuery。fadeIn()设置

7 年前

Steve · 如何将show()和hide()jquery函数应用于css显示属性

8 年前

user3250818 · 打印div的内容,但其中的某些元素除外,不起作用

8 年前

Zach Smith · 在jQuery中遍历var链变量数组

8 年前

TMS_1 · 每天下午用Javascript隐藏CSS类

8 年前

mattbierwirth · 隐藏或取消隐藏所有Excel工作表而不循环

8 年前

WebSon · Jquery慢速隐藏/显示文本、照片、对象等。最小高度200px

8 年前

user8749260 · 使用slidetoggle()显示/隐藏我的div

8 年前