如何使用JavaScript函数从选择选项标签中获取值

Question

我有一个像这样的下拉列表:

<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">

为此，我使用这个脚本。

<script>
function gettingList() {
var selectItem = document.getElementById('itemsList').value;
var displayPrice = selectItem.options[selectItem.selectedIndex].text;
document.getElementById('price').value = displayPrice;
}
</script>

如何解决这个问题?

Answer 1

你可以这样做:

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">

Answer 2

您通过selectvalue属性获得选定的价格。现在，您可以使用它来更新输入。

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">

关于select元素的更多信息——https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Answer 3

你的函数应该是这样的

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">