如果选项 1 在第一个 Select 中，则第二个 Select 禁用

Question

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

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

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

Answer 2

你必须这样做

$("#first_select").on("change",function(){
if(this.selectedIndex != 0){
$("#second_select").removeAttr("disabled"); 
// or you can do this $("#second_select").prop("disabled",false);
});

如果选项 1 在第一个 Select 中，则第二个 Select 禁用

Second Select disabled if Option 1 in first Select

javascript

jquery

select