如何为下拉列表<option>设不同选中值并输出到输入框？

嘿，我来帮你搞定这个需求！其实核心就是给下拉选项加对应value属性，再写个简单的函数把选中值传到输入框里，具体步骤如下：

1. 给选项添加value属性 #

首先得给每个<option>加上value属性——这是关键，你要输出的对应值就存在这里，比从文本里抠数字靠谱多了。修改后的HTML代码如下：

<label>Dropdown-List</label>
<select class="form-control" onchange="handicap(this);">
  <option id="c1" value="5">Example (5)</option>
  <option id="c2" value="10">Example (10)</option>
</select>
<input type="text" class="form-control" id="cap">

这里第一个选项的value设为5，第二个设为10，和选项文本里的数字对应上。

2. 编写handicap()函数 #

在页面的<script>标签里（或者外部JS文件）定义这个处理函数，逻辑很简单：拿到选中的value，再赋值给目标输入框：

function handicap(selectElement) {
  // 获取选中选项的value值
  const selectedValue = selectElement.value;
  // 把值填充到id为cap的输入框里
  document.getElementById('cap').value = selectedValue;
}

我这里用this把当前触发事件的下拉框直接传给函数，这样能精准定位到操作的元素，避免页面有多个下拉框时出错。

额外小技巧 #

要是你不想给函数传参数，也可以通过选择器直接获取下拉框，函数可以这么写：

function handicap() {
  const selectElement = document.querySelector('.form-control');
  const selectedValue = selectElement.value;
  document.getElementById('cap').value = selectedValue;
}

不过还是第一种传this的方式更稳妥哦~

这样设置后，你选中任意下拉选项时，对应的value值就会自动填充到输入框里啦！

内容的提问来源于stack exchange，提问作者codemaniac