隱藏/取消隱藏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函數

回答

相關問題