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

我想根据用户从下拉列表中选择来导致div（其中包含表格）隐藏。它在FireFox和Opera中运行良好，但IE，Safari和Chrome无法正常工作。有什么建议么？隐藏/取消隐藏Div在IE，Safari和Chrome中不起作用的JavaScript函数

<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>

来源

2010-08-24 Josh Curren

我没有看到涉及您的问题的几个组件......下拉菜单和事件处理程序在哪里？ – 2010-08-24 02:28:14

我加了剩下的。 – 2010-08-24 02:38:34

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; 
}

在上面我使用select的值作为我想应用的css显示样式，但是您可以根据它的需要进行任何处理值。

您可以see what I mean here。

来源

2010-08-24 02:56:06 Pat

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

回答

相关问题