Quiero mostrar una alerta cuando alguien elija ambas opciones del elemento de opción de selección html que ha elegido. pero mi función no funciona correctamente en mi función de intercambio allí, la alerta que recibo es "quieres cambiar de indefinido a indefinido". La variable que configuré en la función de intercambio desde y hacia está siendo reemplazada por indefinida. Pero no entiendo por qué sucede esto, ya los he declarado.
$( ".my_Class1" ).each(function( index ) { $( this ).on("change",choice_1) }); function choice_1(){ var from = this.value; return from; } $( ".my_Class2" ).each(function( index ) { $( this ).on("change",choice_2) }); function choice_2(){ var to = this.value; return to; } function exchange() { var first = choice_1(); var second = choice_2(); if(first === second){ alert("you want to change From " + first + " To " + second); //in alert in the browser " You want to change from undefined to undefined" }else{ alert("you want to change From " + first + " To " + second); // Here Also getting the same } } $( ".my_Class1, my_Class2" ).each(function( index ) { $( this ).on("change", exchange) });El problema es cuando llamas a var first = choice_1(); en su función exchange() , la función choice_1() se refiere a this , que no tiene un contexto real cuando lo llama desde exchange() .
Cuando lo llama desde el evento on change , tiene sentido. El this contexto es la opción seleccionada.
Entonces, una posible solución es llamar a exchange() desde dentro de sus choice_1() y choice_2() donde from y to pueden pasarse con el contexto correcto.
Aquí hay una refactorización parcial de su código que debería mostrar las opciones que seleccionó en la alerta. Tenga en cuenta que ninguna opción está preseleccionada al cargar la página, por lo que la primera vez que seleccione una opción, el otro valor no estará undefined .
var from, to; function choice_1() { from = this.value; exchange(from, to) } function choice_2() { to = this.value; exchange(from, to) } function exchange(from, to) { alert("you want to change From " + from + " To " + to); } $(".my_Class1").each(function(index) { $(this).on("change", choice_1) }); $(".my_Class2").each(function(index) { $(this).on("change", choice_2) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>From</label> <select class="my_Class1"> <option>Select</option> <option value="a">A</option> <option value="b">B</option> </select> <br><br> <label>To</label> <select class="my_Class2"> <option>Select</option> <option value="a">A</option> <option value="b">B</option> </select>