Question

我试图根据用户从下拉列表中的选择来隐藏div（包含表格）。它在FireFox和Opera中运行良好，但IE，Safari和Chrome不起作用。有什么建议吗？

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

Answer 1

onclick处理程序并非始终如一地应用于跨浏览器的<option>标记。要解决这个问题，您可以在<select>添加一个onchange处理程序，然后检查该函数是否应该显示或隐藏地址：

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

隐藏/取消隐藏Div JavaScript功能在IE，Safari和Chrome中无法正常工作

1 个答案: