javascript - 禁用基于另一个选择选项的选择选项

Question

我有 2 个选择：

<select id="select_1" name="tipo_carta">
 <option value="1">90gr</option>
 <option value="2">150gr</option>
 <option value="3">270gr</option>
</select>

<select id="select_2" name="stampa">
 <option value="0">Fronte</option>
 <option value="1">Fronte e Retro</option>
</select>

当我选择选项“270gr”（来自 select_1）时，我会禁用选项“Fronte e Retro”（来自 select_2）

我怎样才能做到这一点？

Answer 1

由于其他答案并不完全“简洁”，并且主要基于 jQuery，因此我在这里实现了一个 2 liner Mootools 解决方案：

$('select_1').addEvent('change', function(e) {
    $$('#select_2 option[value=1]').set('disabled',e.target.value == 3);
});

将它放在您domready初始化 UI 事件的地方或任何地方。

对于非常旧的 Mootools 版本，您必须更详细一点：

$('select_1').addEvent('change', function(e) {
    $$('#select_2 option[value=1]').each(function(el){ el.disabled = (e.target.value == 3);});
});

Answer 2

尝试这个..

$('#select_1').change(function(){
  if($(this).val() == 3){
    $('#select_2').find('option:eq(1)').prop('disabled',true);
  }else{
     $('#select_2').find('option:eq(1)').prop('disabled',false);
  }
});

在这里摆弄

Answer 3

使用以下

$('#select_1').change(function() {
   if($(this).val() == '3') {
        $("#select_2 option:contains('Fronte e Retro')").attr({disabled:true});
    } else {
       $("#select_2 option:contains('Fronte e Retro')").attr({disabled:false});
    }

});