Skip to main content
2 de 2
se añadieron 1139 caracteres en el cuerpo
Perti
  • 21
  • 3

Select que descartan la opcion elegida en el resto de select

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>
Perti
  • 21
  • 3