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.
{ }
. La idea es tener un ejemplo mínimo verificable en cada pregunta.