我有一個這樣的下拉串列：
<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>
我該如何解決這個問題。？
uj5u.com熱心網友回復：
你可以這樣做：
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">uj5u.com熱心網友回復：
您可以通過 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
uj5u.com熱心網友回復：
你的功能應該是這樣的
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">轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/342690.html
標籤：javascript html css 数组 html5-canvas
上一篇：以下兩種字串情況有什么區別
下一篇：回圈遍歷陣列和資料幀