Skip to main content
se añadieron 203 caracteres en el cuerpo
Origen Enlace

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();

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

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();
Origen Enlace

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