javascript - 如果第一个选择中的选项 1，则第二个选择被禁用

Question

我有两个选择框。我需要禁用整个第二个选择框，直到用户在第一个选择框中选择第一个选项以外的任何选项。

这是我的逻辑，但我不能完全执行它。

if 
     .first-select = option-1 
then 
     .second-select .attr('disabled').
else
     .second-select .removeAttr('disabled')

Answer 1

您可以使用 selectedIndex 属性:

var 
    firstSelect = document.querySelector('.first-select'),
    secondSelect = document.querySelector('.second-select')
;

function changeHandler() {
   secondSelect.disabled = firstSelect.selectedIndex === 0;
}

firstSelect.addEventListener('change', changeHandler);
changeHandler(); // execute the handler once on DOM ready

或者如果您使用的是 jQuery:

$('.first-select').on('change', function() {
   $('.second-select').prop('disabled', this.selectedIndex === 0);
}).change(); // trigger the event once on DOM ready