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

Posted 2023-03-25

【中文标题】如何使用 JavaScript 函数从 Select Option 标记中获取值

【英文标题】：How to I get value from Select Option tag using JavaScript function

【发布时间】：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>

我该如何解决这个问题？

【参考方案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">