4

Tengo este código en PHP que me repite 10 veces el mismo select con la misma información.

  for ($i=1; $i < 11; $i++)
  {
      $output.='
      <div class="form-group">
        <label>Prioridad '.$i.' de horario</label><br>
        <select class="form-control selectDisable">
          <option selected disabled>Elige una opción</option>
          <option value="1">Horario: 00:00 - 00:00 Break:  00:00 - 00:00 Descanso: Lunes</option>
          <option value="2">Horario: 00:00 - 00:00 Break:  00:00 - 00:00 Descanso: Martes</option>
          <option value="3">Horario: 00:00 - 00:00 Break:  00:00 - 00:00 Descanso: Miércoles</option>
          <option value="4">Horario: 00:00 - 00:00 Break:  00:00 - 00:00 Descanso: Jueves</option>
          <option value="5">Horario: 00:00 - 00:00 Break:  00:00 - 00:00 Descanso: Viernes</option>
          <option value="6">Horario: 00:00 - 00:00 Break:  00:00 - 00:00 Descanso: Sábado</option>
          <option value="7">Horario: 00:00 - 00:00 Break:  00:00 - 00:00 Descanso: Domingo</option>
        </select>
      </div>';
  }

Esto tengo con Jquery que me elimina la opción seleccionada en los demás select

  $(document).on('change','.selectDisable',function(){
    $(this).siblings().find('option[value="'+$(this).val()+'"]').remove();
  });

El problema es que no lo ejecuta, al parecer por el <div class="form-group"> ya que al parecer no está encontrando hermanos dentro del mismo DIV.

Ya había hecho la pregunta anteriormente aqui:

Eliminar options de distintos select

Insisto, si quito el div del form-group lo hace bien, pero como puedo manejarlo con esa clase, he pensado en

$(document).on('change','.selectDisable',function(){
    $(this).closest('.form-group').find('.selectDisable').siblings().find('option[value="'+$(this).val()+'"]').remove();
  });

Pero no me salió, alguna sugerencia?

2 respuestas 2

4

Hay un fallo en ese último código que es el que hace que no funcione:

$(document).on('change','.selectDisable',function(){
    $(this).closest('.form-group').find('.selectDisable').siblings().find('option[value="'+$(this).val()+'"]').remove();
});

El siblings() está mal colocado. No quieres los hermanos del select, quieres los hermanos del .form-group que son los que van a contener los otros select. Para ello mueve el siblings() antes del find(".selectDisable").

Con ese cambio, el código quedaría así y ya te debería funcionar:

$(document).on('change','.selectDisable',function(){
    $(this).closest('.form-group').siblings().find('.selectDisable').find('option[value="'+$(this).val()+'"]').remove();
});

Pero aún podrías simplificar un poco más el código porque realmente ya no necesitarías dos find seguidos: podrías unirlos en uno solo para que fuese algo más eficiente:

$(document).on('change','.selectDisable',function(){
    $(this).closest('.form-group').siblings().find('.selectDisable option[value="'+$(this).val()+'"]').remove();
});

Aquí te dejo una demo con sólo 3 select:

$(document).on('change', '.selectDisable', function() {
  $(this).closest('.form-group').siblings().find('.selectDisable option[value="' + $(this).val() + '"]').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="form-group">
  <label>Prioridad 1 de horario</label>
  <br>
  <select class="form-control selectDisable">
    <option selected disabled>Elige una opción</option>
    <option value="1">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Lunes</option>
    <option value="2">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Martes</option>
    <option value="3">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Miércoles</option>
    <option value="4">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Jueves</option>
    <option value="5">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Viernes</option>
    <option value="6">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Sábado</option>
    <option value="7">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Domingo</option>
  </select>
</div>
<div class="form-group">
  <label>Prioridad 2 de horario</label>
  <br>
  <select class="form-control selectDisable">
    <option selected disabled>Elige una opción</option>
    <option value="1">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Lunes</option>
    <option value="2">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Martes</option>
    <option value="3">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Miércoles</option>
    <option value="4">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Jueves</option>
    <option value="5">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Viernes</option>
    <option value="6">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Sábado</option>
    <option value="7">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Domingo</option>
  </select>
</div>
<div class="form-group">
  <label>Prioridad 3 de horario</label>
  <br>
  <select class="form-control selectDisable">
    <option selected disabled>Elige una opción</option>
    <option value="1">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Lunes</option>
    <option value="2">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Martes</option>
    <option value="3">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Miércoles</option>
    <option value="4">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Jueves</option>
    <option value="5">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Viernes</option>
    <option value="6">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Sábado</option>
    <option value="7">Horario: 00:00 - 00:00 Break: 00:00 - 00:00 Descanso: Domingo</option>
  </select>
</div>

2
  • Una cosa: con esto borras, pero no reactivas si el usuario cambia de opción
    – Alvaro Montoro
    el 8 jul. 2017 a las 21:08
  • Si es la idea, agradezco tu apoyo el 8 jul. 2017 a las 21:28
0

otra opción puede ser

$(document).on('change','.selectDisable',function(){
   $('option[value="'+$(this).val()+'"]',this).remove();
});
1
  • 1
    Hola juliana, esta respuesta ha sido marcada como de baja calidad por la comunidad debido a su extensión y contenido. Deberías editarla para añadir algo más de información: ¿qué hace ese código? ¿por qué o cómo solucionaría el problema expuesto en la pregunta? Lee Cómo responder para más información y completa el recorrido de bienvenida para aprender cómo funciona el sitio en general (y ganar tu primera medalla).
    – Alvaro Montoro
    el 27 ene. 2018 a las 23:29

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.