Estoy convirtiendo un campo en una de mis tablas de texto libre a un menú desplegable con una lista de opciones. Luego asigno el valor seleccionado dentro de una función de cambio, que funciona correctamente, sin embargo, cuando intento asignar esta variable al elemento de valor, usando setAttribute, no puedo encontrarlo. Traté de investigar cómo acceder a las variables fuera del alcance de una función, pero no pude vincular esto con el método de atributo establecido que estoy usando. Si hay una mejor manera de hacer esto, intentaré esto también.
El siguiente código se llama cuando se hace clic en el botón de edición en un formulario, si elimino todas las cosas desplegables y solo uso el texto a mano alzada de x.setAttribute("value",role) entonces pasará el valor al AJAX llama sin problema. ¿Qué estoy haciendo mal? Gracias.
function editProcess(row,id,name,username,email,role){ //WORKING $( "#name"+id+"" ).empty(); var x = document.createElement("input"); x.setAttribute("type", "text"); x.setAttribute("class", "form-control"); x.setAttribute("value", name); x.setAttribute("required", "true"); x.setAttribute("style", "padding:0"); x.setAttribute("name","name"); x.setAttribute("onInput","clearPopUps()"); $( "#name"+id+"" ).append(x); //NOT WORKING myParent = document.body; //Create array of options to be added var roleArray = ["Admin","Officer","Manager"]; $( "#role"+id+"" ).empty(); //Create and append select list var x = document.createElement("select"); myParent.appendChild(x); //Create and append the options for (var i = 0; i < roleArray.length; i++) { var option = document.createElement("option"); option.value = roleArray[i]; option.text = roleArray[i]; x.appendChild(option); } $('#role').on('change', function() { role = $('#role option:checked').val(); this.selectedOptions[0].setAttribute('value', role); x.setAttribute("value", role); console.log(x); }); x.setAttribute("type", "text"); x.setAttribute("class", "form-control"); //x.setAttribute("value", selectedRole); x.setAttribute("required", "true"); x.setAttribute("style", "padding:0"); x.setAttribute("name","role"); x.setAttribute("onInput","clearPopUps()"); $( "#role"+id+"" ).append(x); }Establece el valor de un menú desplegable utilizando el método val() en jQuery o la propiedad de value en javascript vainilla.
$("#using-jQuery").on("click", () => $("#test").val("2") ) document.getElementById("using-vanilla").addEventListener("click", () => document.getElementById("test").value = "3" ) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="test"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <button id="using-jQuery">Set to 2 using jQuery</button> <button id="using-vanilla">Set to 3 using Vanilla JS</button> ¡Usar setAttribute no tendrá el mismo efecto!
document.getElementById("using-vanilla").addEventListener("click", () => document.getElementById("test").setAttribute("value","3") ) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="test"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <button id="using-vanilla">Set to 3 using Vanilla JS + setAttribute</button>