Esta es una muestra de los menús desplegables usando select que tengo
<label class="form__label" for="country"> Country Of Residence</label> <select id="country" class="form__input" name="country"/> <option value="null">Select Country</option> <option value="United Arab Emirates">United Arab Emirates</option> <option value="Bahrain">Bahrain</option> <option value="Kuwait">Kuwait</option> <option value="Oman">Oman</option> </select>El valor se almacena en la base de datos como una 'Cadena'.
Agradecería alguna ayuda para comprender la mejor manera de avanzar para 2 cosas
en carga
El valor de cadena de la base de datos debe ser la opción que se muestra en mi menú desplegable. Y si por alguna razón el valor de la cadena en la base de datos no coincide, entonces se debe mostrar la opción 'Seleccionar país'.
en cambio
El valor seleccionado debe ser el valor que se envía a la base de datos como una cadena. La funcionalidad para esto ya está implementada, pero antes estaba usando una input de type=text . Entonces, ¿qué tipo de cambios se necesitan para enviar este valor ahora desde un campo de selección?
He investigado en la red pero cuanto más investigo más me confundo. Y la mayoría de las respuestas parecen ser soluciones jQuery. Estoy buscando ayuda con Vanilla Javascript. Algunas cosas sobre las que necesito aclararme son: "¿Necesito tener un campo oculto para almacenar el valor y enviar y recibir desde la base de datos?" .. Estoy realmente confundido con la información que he investigado.
Cualquier ayuda sería apreciada.
Obtenga el valor del elemento seleccionado en el evento usando JavaScript puro, pruebe esto y obtenga valor.
var select_element = document.getElementById('country'); select_element.onchange = function() { var elem = (typeof this.selectedIndex === "undefined" ? window.event.srcElement : this); var value = elem.value || elem.options[elem.selectedIndex].value; alert(value); // your another required code set! }Después de un par de días de lucha, estoy usando esta solución. Si esto es excesivo y hay un enfoque más simple, compártalo en los comentarios.
Así que primero identifiqué el elemento select .
const country = document.getElementById('country');Luego creó una función como la siguiente
const displayCountry = function() { //CREATE ARRAY OF ALL OPTIONS const optionsArray = Object.entries(country.children); console.log(optionsArray); // GET NAME OF COUNTRY FROM SELECT FIELD const nameOfCountry = country.getAttribute("value"); console.log(nameOfCountry); // FIND OPTION WITH THE SAME COUNTRY NAME const option = optionsArray.find( (option) => option[1].value === nameOfCountry ); // UPDATE OPTION FIELD BY SETTING ATTRIBUTE OF SELECTED option[1].setAttribute("selected", true); console.log(option[1]); };Se puede acortar como se muestra a continuación.
const displayCountryShortened = function() { Object.entries(country.children) .find((option) => option[1].value === country.getAttribute("value"))[1] .setAttribute("selected", true); };