Функции скрытия/отображения Div JavaScript не работают в IE, Safari и Chrome

Я пытаюсь скрыть 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>

javascript browser google-chrome hide internet-explorer
person Josh Curren    schedule 24.08.2010    source источник
comment
Я не вижу нескольких компонентов, участвующих в вашем вопросе... где раскрывающийся список и обработчик событий для него?   -  person Nick Craver    schedule 24.08.2010

Ответы (1)


arrow_upward
1
arrow_downward

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

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

person Pat    schedule 24.08.2010