Изменение в одном меню выбора отключает другое меню выбора на веб-странице?

Question

На моей странице есть меню <select>.

Мне бы хотелось, чтобы, если selectedIndex не не равнялось '1' (т. Е. if (this.selectedIndex! = 1 )), тогда он отключается (<select disabled="disabled"> ) другое меню <select> на моей веб-странице.

Как мне этого добиться?

Спасибо.

Answer 1

<select id="first"><option>a</option><option>b</option></select>
<select id="second"></select>

<script type="text/javascript">
    document.getElementById('first').addEventListener('change', function() {
       if(this.selectedIndex != 1) {
           document.getElementById('second').disabled = true;
       }
       else {
           document.getElementById('second').disabled = false;
       }
    });
</script>

jsFiddle Demo

Answer 2

1. связать событие change при первом выборе (addEventListener() или для более старых версий IE, attachEvent())

   • MDC на addEventListener
     
     

2. в обработчике событий, проверьте selectedIndex, 1 это или нет

3. если это не 1, найдите второй выбор в DOM и отключите его (установите для свойства disabled значение true)

РЕДАКТИРОВАТЬ : Я создал небольшую скрипку, решающую проблему, как я описал. Я предлагаю НЕ использовать встроенные обработчики событий в вашем HTML (onchange="xz()"), есть намного более продвинутые доступные методы, и HTML должен быть только разметкой, без стиля и поведения.

Итак, это так просто:

document.getElementById('fos1').addEventListener('change', function() {
    document.getElementById('fos2').disabled=this.selectedIndex != 1;
});

где fos1 и fos2 - идентификаторы выбранных вами полей.

• JsFiddle Demo

• Ранние обработчики событий в QuirksMode

Answer 3

Как это?

http://jsfiddle.net/rdeww/1/

JQ

$('#one').change(function () {
    var selected = $(this).find(':selected').val();  

    if(selected != 1) {
        $('#two').attr('disabled','disabled');
    } else {
        $('#two').attr('disabled',false);
    }
});

HTML

<select id="one">
    <option value="1">Dont disable</option>
    <option value="2">Disable</option>
    <option value="3">Disable</option>
    <option value="4">Disable</option>
    <option value="5">Disable</option>
</select>
<select id="two">
    <option value="1">Random select</option>
    <option value="2">Random select</option>
    <option value="3">Random select</option>
    <option value="4">Random select</option>
    <option value="5">Random select</option>
</select>