Tengo una lista desplegable como esta:
<select id="itemsList" onchange="gettingList()"> <option>Please select the option</option> <option value="50">Soap</option> <option value="100">Sugar</option> <option value="290">Oil</option> </select> <br><br>Tengo que obtener el valor de la lista anterior en la etiqueta de entrada a continuación.
<input type="text" id="price">Para esto, estoy usando este script.
<script> function gettingList() { var selectItem = document.getElementById('itemsList').value; var displayPrice = selectItem.options[selectItem.selectedIndex].text; document.getElementById('price').value = displayPrice; } </script>Cómo puedo resolver este problema.?
Puedes hacerlo:
var selectItem = document.getElementById('itemsList'); function gettingList() { document.getElementById('price').value = selectItem.value; } <select id="itemsList" onchange="gettingList()"> <option>Please select the option</option> <option value="50">Soap</option> <option value="100">Sugar</option> <option value="290">Oil</option> </select> <br><br> <input type="text" id="price">Obtiene el precio seleccionado a través de la propiedad de value seleccionado. ahora, puede actualizar la entrada con él.
function gettingList() { var selectItemPrice = document.getElementById('itemsList').value; document.getElementById('price').value = selectItemPrice; } <select id="itemsList" onchange="gettingList()"> <option>Please select the option</option> <option value="50">Soap</option> <option value="100">Sugar</option> <option value="290">Oil</option> </select> <br><br> <input type="text" id="price">Más información sobre el elemento seleccionado : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Tu función debería ser así.
function gettingList() { let itemsList = document.querySelector('#itemsList'); let price = itemsList.value let item = itemsList.options[itemsList.selectedIndex].text document.querySelector("#price").value = price document.querySelector("#item").value = item console.log(price, item) } <select id="itemsList" onchange="gettingList()"> <option>Please select the option</option> <option value="50">Soap</option> <option value="100">Sugar</option> <option value="290">Oil</option> </select> <input placeholder="Price" type="text" id="price"> <input placeholder="Item" type="text" id="item">