I am trying to cause a div (which contains a table) to hide based on a users selection from a dropdown. It works fine in FireFox and Opera, but IE, Safari, and Chrome do not work. Any suggestions?
<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(div开发者_如何学编程ID);
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>
The onclick handler is not consistently applied to <option>
tags cross browser. To get around this, you could add an onchange handler to your <select>
and then check in that function if you should show or hide the address:
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;
}
In the above I use the select's value as the css display style I want to apply, however you could do whatever processing you wanted based on its value.
You can see what I mean here.
精彩评论