Question

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

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.