2

Tengo 3 selects, quiero que cuando se elija uno se borre de los otros 2 pero sin borrar el primero. Es posible?

<select class="sel">
  <option value="1"></option>
  <option value="2"></option>
  <option value="3"></option>
</select>

<select class="sel">
  <option value="1"></option>
  <option value="2"></option>
  <option value="3"></option>
</select>

<select class="sel">
  <option value="1"></option>
  <option value="2"></option>
  <option value="3"></option>
</select>
<script>
    $(document).on('change','.sel',function(){
      var opcion = $(this).val();
      $('.sel').each(function(){
          $('.sel option[value="'+opcion+'"]').remove();
      })
    });
</script>

Me está eliminando el valor del SELECT de donde lo saqué. Como puedo prevenir eso?

5
  • 1
    quieres eliminar el valor? o los select? Commented el 12 ene. 2017 a las 21:15
  • El valor que ya se ha elegido Commented el 12 ene. 2017 a las 21:21
  • por decir elimino el valor 1 del select 1, se deberia eliminar el valor 1 de los otros 2? Commented el 12 ene. 2017 a las 21:22
  • Si seleccione el valor 1 del primer select se deben eliminar el mismo valor de los otros 2 Commented el 12 ene. 2017 a las 21:25
  • revisa mi respuesta, no se si es lo que buscabas Commented el 12 ene. 2017 a las 21:37

1 respuesta 1

3

Modifique tu script dejándolo de esta manera:

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

Lo que hace es:

  1. Del select cualquiera que se buscara de los elementos hermanos para buscar los elementos hermanos uso .siblings() el cual me hace una busqueda de todos los select
  2. Después busco los options con .find() en el cual le digo que va a buscar el elemento que contenga el valor seleccionado del select que cambio y queda de esta forma .find('option[value="'+$(this).val()+'"]')
  3. Elimino ese elemento de los selects con .remove()

$(document).on('change','.sel',function(){
  $(this).siblings().find('option[value="'+$(this).val()+'"]').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
  <option>Selecciona</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select class="sel">
  <option>Selecciona</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select class="sel">
  <option>Selecciona</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

2
  • elimine mi respuesta, por que esta respuesta es mucho mejor, +1 Commented el 12 ene. 2017 a las 21:41
  • Funciona :O Gracias Commented el 13 ene. 2017 a las 22:39

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.