Así que tengo un menú desplegable que está dentro de un formulario como el siguiente:
<form id="formA" action="John/Doe" method="post"> -hidden input with value- <select name="Letters" id="Letters"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> </select> </form>Entonces, mi situación es que una vez que hago una selección en el menú desplegable, activará una acción de envío de formulario como la siguiente:
$(document).on('change', '#Letters', function() { // here I am submitting the form whenever the ajax call success $.ajax({ type: "Get", url: "sample/url", success: function(data){ console.log(data); $('#formA').submit(); } }); }); Ahora tengo otra llamada ajax, cuando se completa esta llamada ajax, necesito establecer el valor de selección para esta misma lista desplegable, lo probé con $('#Letters').val(newValue).change() como se muestra a continuación .
$.ajax({ type: "POST", url: "sample/url", data: {sampleData} success: function(data){ console.log(data); }, complete: fuinction(){ $('#Letters').val(newValue).change(); } }); Sin embargo, este .change() activará la llamada ajax anterior nuevamente, que no es algo que quiero. Así que supongo que no puedo usar .change() aquí.
La razón por la que hago esto es que quería este valor para la siguiente acción de envío de formulario. Si no configuro este valor después de esta segunda llamada ajax, cuando envíe el siguiente formulario, obtuve valores null .
También probé $("#Letters option[value=" + thatOptionValue + "]").attr('selected', true) Pero este no está configurando el valor en la lista desplegable en absoluto. Mi controlador se está volviendo nulo por esto.
Me parece que solo cuando se usa .change() entonces hará la operación de valor establecido. ¿Hay alguna otra solución para establecer el valor sin usar .change() ?
¡Cualquier ayuda será apreciada!
Siempre newValue represente un atributo de value de uno de sus elementos <option> en su <select> , todo lo que necesita usar es $("#Letters").val(newValue) . Esto seleccionará la opción adecuada sin activar el evento de cambio
$.post("sample/url", { sampleData }).done(data => { $("#Letters").val(newValue) // whatever this is ¯\_(ツ)_/¯ })Demostración ~ https://jsfiddle.net/zfep1Lnj/
Entonces encontré una respuesta de esta publicación: https://stackoverflow.com/a/13343616/6513302
Entonces, en primer lugar, usar .val("yourDesiredValueHere") establecerá la selección en lo que desea, pero en realidad no establece el valor en esta lista desplegable para su próximo envío de formulario sin usar .change() para desencadenar manualmente el evento. ps Al menos, en mi caso.
En la publicación anterior, hay alguien que tiene el mismo escenario de que usar .change() está causando un ciclo infinito porque hay un evento de cambio acotado en otro lugar. Lo extraño es que cuando traté de hacer eso deseleccionando la selección -> volver a seleccionar la opción -> establecer el valor usando .val("YourValueHere").change() , el ciclo infinito dejó de ocurrir.
Así que mi solución de trabajo final:
$("#dropDownList" option).removeAttr('selected') .filter('[value=' + YourDesiredValueVariable + ']') .prop('selected', true); $("#dropDownList").val(YourDesiredValueVariable).change();Usando la solución anterior, no obtengo un bucle infinito, incluso si tengo otro evento de cambio limitado en la misma lista desplegable.