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，我 implemented a 2 liner Mootools solution here :

$('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);});
});