Skip to main content
2 de 2
se añadieron 203 caracteres en el cuerpo

Como dices que puedes usar Jquery pongo la respuesta usandolo, te recomiendo que utilizes un "value" en el "option"

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>


$('select').change(function() {
    var value = $(this).val();
    $(this).siblings('select').children('option').each(function() {
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true).siblings().removeAttr('disabled');   
        }
    });
});

Si en tus selects no vas a usar un "value" simplemente cambia la linea del if para que no lea el value y solo lea el texto. Esta linea:

$('select').change(function() {
    
    var value = $(this).val();
 
    $(this).siblings('select').children('option').each(function() {
        if ( $(this).text() === value ) {
            $(this).attr('disabled', true).siblings().removeAttr('disabled');   
        }
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<select>
    <option >1</option>
    <option >2</option>
    <option >3</option>
</select>

<select>
    <option >1</option>
    <option >2</option>
    <option >3</option>
</select>

if ( $(this).val() === value ) {

Cambiarla a

 if ( $(this).text() === value ) {

Para que funcione con multiples select elimina el removeAttr

$(this).attr('disabled', true).siblings().removeAttr('disabled');

que quede asi:

$(this).attr('disabled', true).siblings();