0

y gracias de antemano. Me gustaría saber como seria posible que en varios select con las mismas opciones para elegir, si el usuario selecciona una, se debiliten y no se puedan elegir en el resto de select, y que si cambia de opcion se vuelva a habilitar la que ha desmarcado. En resumen, que no puedan elegirse opciones repetidas.

El codigo resumido es el siguiente:

    <label>opcion 1</label><select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
 </select><br>
 <label>opcion 2</label><select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
 </select><br>
 <label>opcion 3</label><select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
 </select><br>

Nuevo codigo:

<!doctype html>
<html>
<head>
<meta c`introducir el código aquí`harset="utf-8">
<title>Documento sin título</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

</head>

<body>
<?php
    $prueba=array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18);

for($i=1;$i<=18;$i++):?>
<label>opcion <?php echo $i;?></label><select class="hola">
    <option selected="selected" disabled="disabled">Selecciona uno</option>
    <?php foreach($prueba as $elemento):?>
    <option><?php echo $elemento?></option>
    <?php endforeach?>
    </select>
    <br><br>
<?php endfor?>    

<script> 
$('.hola').change(function() {

    var value = $(this).val();

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

});
</script>

</body>
</html>
2
  • ¿Puedes usar jQuery o estás limitado a usar javascript puro?
    – ordago
    el 30 oct. 2019 a las 16:25
  • Puedo usar jQuery
    – Perti
    el 30 oct. 2019 a las 16:56

1 respuesta 1

3

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();
3
  • Lo primero muchas gracias scorpio, pero no funciona con 3 selects, con dos va perfecto, lo que esta seleccionado en uno no se puede seleccionar en el otro, pero necesito que funcione con 18 selects. Veo que anula la opcion del ultimo select que se ha cambiado, pero las opciones de los select elegidos anteriormente las vuelve a poner activas.
    – Perti
    el 30 oct. 2019 a las 18:22
  • Buen dia, he editado la respuesta y agregado la opcion para que trabaje con multiples select, lee la parte que agregue donde dice que borres el removeAttr
    – scorpio408
    el 30 oct. 2019 a las 20:34
  • Buenas y gracias de nuevo Scorpio, esta genial, casi es lo que quiero, lo único que no libera las opciones para el resto de select cuando cambio uno ya seleccionado. Si por ejemplo en uno de los select que ya he seleccionado la opción 2 y esta bloqueada en todos los demás, lo cambio por otra opción, por ejemplo la 3, debería liberar el seleccionar la opción 2 en todos los select. Edito la pregunta con el nuevo código que tengo actualmente con tu ayuda. Muchas gracias.
    – Perti
    el 31 oct. 2019 a las 6:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.