Home / Questions / 85687
Accepted
Alberto Siurob
Asked: 2020-07-09 10:56:06 +0800 CST 2020-07-09 10:56:06 +0800 CST

Remove option from select without intervening a div

  • 772

I have this code in PHP that repeats the same select 10 times with the same information.

  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>';
  }

I have this with Jquery that eliminates the selected option in the other select

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

The problem is that it doesn't execute it, apparently <div class="form-group">because it doesn't seem to be finding siblings within the same DIV.

I've already asked the question here before:

Remove options from different select

I insist, if I remove the div from the form-group it does it fine, but since I can handle it with that class, I have thought of

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

But it didn't work out for me, any suggestions?

php

2 Answers

  1. Best Answer

    There is a bug in that last code that is causing it to not work:

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

    He siblings()is misplaced. You don't want the brothers of the select, you want the brothers of .form-groupthe one that are going to contain the others select. To do this, move the siblings()before the find(".selectDisable").

    With that change, the code would look like this and it should work for you:

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

    But you could still simplify the code a bit more because you really wouldn't need two findin a row anymore: you could join them into one to make it a bit more efficient:

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

    Here I leave you a demo with only 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>

    • 4

  2. another option can be

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