Скрыть / показать функции Div, не работающие в IE, Safari и Chrome

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> в браузере.Чтобы обойти это, вы можете добавить обработчик 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, который я хочу применить, однако вы можете выполнять любую обработку, которую хотите, основываясь на ее значении.

Вы можете понять, что я имею в виду здесь .