如何使用JavaScript函数获取Select Option标签的值并解决代码取值异常问题

架构老林

2026-4-30

问题分析与修复方案

嘿，我一眼就看到问题出在哪啦！你的JavaScript函数里犯了一个小错误——你把select元素的value值当成了select DOM对象来用，这肯定会报错的。

先看你原函数里的核心问题：

function gettingList() {
  var selectItem = document.getElementById('itemsList').value; // 这里拿到的是选中项的value（比如"50"，是字符串类型）
  var displayPrice = selectItem.options[selectItem.selectedIndex].text; // 字符串根本没有options属性，直接抛出错误！
  document.getElementById('price').value = displayPrice;
}

修复后的完整代码

HTML部分：

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

JavaScript部分：

function gettingList() {
  // 先获取select DOM元素本身，而不是它的value值
  var selectElement = document.getElementById('itemsList');
  // 通过元素的selectedIndex拿到选中项的文本内容
  var selectedText = selectElement.options[selectElement.selectedIndex].text;
  // 把选中的文本填充到input输入框
  document.getElementById('price').value = selectedText;
}

额外优化：更简洁的写法

现在还有更直观的方式获取选中项文本，利用selectedOptions属性（单选下拉取第一个选中项即可）：

function gettingList() {
  var selectElement = document.getElementById('itemsList');
  // 直接获取选中选项的文本
  var selectedText = selectElement.selectedOptions[0].text;
  document.getElementById('price').value = selectedText;
}