如何使用 JavaScript 函数从 Select Option 标记中获取值答案

【问题标题】：How to I get value from Select Option tag using JavaScript function如何使用 JavaScript 函数从 Select Option 标记中获取值
【发布时间】：2021-12-15 03:26:47
【问题描述】：

我有一个这样的下拉列表：

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

我该如何解决这个问题？

【问题讨论】：

标签： javascript html css arrays html5-canvas

【解决方案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">

【讨论】：

【解决方案2】：

您通过选择value 属性获得所选价格。现在，您可以使用它更新输入。

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

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

【讨论】：

【解决方案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">

【讨论】：