Tengo una opción de selección como esta:
<select name="color" id="multipleAttr" class="form-control select-2"> <option value="blue"> <option value="red"> </select>Ahora, para devolver el valor de esto con jQuery, hice esto:
$(".select-2").change(function() { var val = $(".select-2").val(); console.log(val); });Funciona bien y muestra correctamente el valor del elemento seleccionado.
Pero quería hacer esto más dinámicamente usando un bucle for:
var counters = 2; for(i=2;i<=counters;i++){ $(".select-"+i).change(function() { var val = $(".select-"+i).val(); console.log(val); }); } Por lo tanto, debería seleccionar el valor de clase select-2 y devolverlo como val .
Pero se imprime indefinido de alguna manera.
Entonces, ¿qué está yendo mal aquí? ¿Cómo puedo solucionar este problema?
Debe usar el evento que se le proporcionó en el método .change en lugar de obtener nuevamente el elemento de dom en la devolución de llamada .change.
Entonces tu código será como
var counters = 2; for(i=2;i<=counters;i++){ $(".select-"+i).change(function(event) { var val = event.target.value; console.log(val); }); }De hecho, ¿por qué recorrer los nombres de clase con números? Simplemente configure una sola clase para representar todos los elementos seleccionados con la funcionalidad, y luego configure atributos de datos para otra información si la necesita.
$('.select').change(function() { let val = $(this).val(); let myName = $(this).data('num'); console.log(`new val is ${val} from ${myName}`); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class='select' data-num='select-1'> <option selected></option> <option value='33'>33</option> </select> <select class='select' data-num='select-2'> <option selected></option> <option value='55'>55</option> </select>