1

Tengo este código con los elementos creados inicialmente funciona de maravilla pero una vez que usas el botón de añadir los nuevos elementos no ejecutan la función.

Aquí mi código (también en jsfiddle):

$(".selectClass").change(function() {
  $("select option").prop("disabled", false);
  $(".selectClass").not($(this)).find("option[value='" + $(this).val() + "']").prop("disabled", true);
  console.log('in');
});

$(".addButton").click(function() {
  $('.myOptions').append(`<select class="selectClass">
                            <option value="default">Select one</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>`);
})
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<button class="addButton">Add</button>
<div class="myOptions">
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
</div>

Mi código lo que hace es que, una vez elegida una opción en un select, en los demás select la deshabilita, cosa que no funciona con los select añadidos dinámicamente. ¿Alguien sabe porqué?

EDIT:
Ya logré que ejecute la función volviéndola a escribir después de crear el elemento. Ahora lo que pasa es que los nuevos elementos no aparecen con las opciones deshabilitadas en los otros.

1
  • 2
    César. Te invito a que hagas todas las preguntas que necesites, pero manteniendo el orden del sitio: crea una publicación para cada problema. De igual modo, te pido encarecidamente que pegues en cada pregunta tu código con el formato adecuado, usando el botón { }. La idea es tener un ejemplo mínimo verificable en cada pregunta.
    – toledano
    Commented el 24 abr. 2017 a las 5:48

3 respuestas 3

1

Utiliza el evento onchange de la siguiente manera:

$(document).on("change",".selectClass",function() {
  $("select option").prop("disabled", false);
  $(".selectClass").not($(this)).find("option[value='" + $(this).val() + "']").prop("disabled", true);
  console.log('in');
});

$(".addButton").click(function() {
  $('.myOptions').append(`<select class="selectClass">
                            <option value="default">Select one</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>`);
})
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<button class="addButton">Add</button>
<div class="myOptions">
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <select class="selectClass">
    <option value="default">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
</div>

1

Cesar, tu código me anduvo bien seleccionando la librería de JQuery 3.2.1:

introducir la descripción de la imagen aquí

Saludos

3
  • Creo que olvide agregar el jquery, pero ese no es mi error, mi error esta en que cuando agregas un nuevo select, no entra a la funcion change, con lo cual la opcion que seleccionas en el que agregaste dinamicamente no se deshablita en los demas Commented el 24 abr. 2017 a las 4:48
  • Cesar, pude resolverlo de este modo: Commented el 24 abr. 2017 a las 5:50
  • Cesar, pude resolverlo de este modo: jsfiddle.net/4L4ystwm/2 . El problema se debe a que los nuevos elementos que añades dinamicamente no se vinculan al envento. Ahora aparece el problema de que al modificar un valor, lo modifica en todos los demas. Sugiero para esto referenciar los elementos por ID para que al realizar un OnChange sepa a que elemento select está haciendo referencia. Comentame luego de hacer las pruebas si pudiste resolverlo así buscamos la solución. Commented el 24 abr. 2017 a las 6:01
-1

Debes emplear el evento on con jquery, por ejemplo:

$('.addButton').on('click',function(){});

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.