Disable select option based on another select option

Question

I have 2 select:

<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>

I would disable option "Fronte e Retro" (from select_2) when I select option "270gr" (from select_1)

How can I achieve this?

Answer 1

Since the other answers aren't exactly 'concise', and mostly jQuery based, I implemented a 2 liner Mootools solution here:

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

Put it in your domready or wherever you are initializing UI events.

For extremely old Mootools versions you'll have to be a bit more verbose:

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