Delete select option without intervening a div

Navigation
4

I have this code in PHP that repeats me 10 times the same select 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>';
  }

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

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

The problem is that he does not execute it, apparently for the <div class="form-group"> since apparently he is not finding brothers within the same DIV.

I had already asked the question above here:

  

Remove options from different select

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

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

But it did not come out, any suggestions?

    
asked by Alberto Siurob 08.07.2017 в 20:56
source

2 answers

4

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

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

The siblings() is incorrectly placed. You do not want the siblings of the select , you want the siblings of the .form-group which are the ones that are going to contain the other select . For this, move the siblings() before the find(".selectDisable") .

With that change, the code would be 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 would not need two find in a row: you could join them together in one just to make it more efficient: 

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

Here is 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>
    
answered by 08.07.2017 / 22:40
source
0

another option may be 

$(document).on('change','.selectDisable',function(){
   $('option[value="'+$(this).val()+'"]',this).remove();
});
    
answered by 27.01.2018 в 20:00
Query about the reserved word "super ()" JAVA Compare two element-by-element vectors