如何实现HTML二级筛选select下拉框复制显示文本而非option的value值

嘿，这事儿好办！你需要的是获取下拉框选中项的显示文本，而不是它的value属性值对吧？我给你捋清楚怎么实现：

核心思路 #

HTML的<select>元素里，选中项的显示文本可以通过选中的<option>元素的.text或.textContent属性直接获取，完全不用碰它的.value属性。

具体代码示例 #

假设你的目标输入框ID是targetInput，我们可以监听下拉框的change事件，实时把选中的文本复制过去：

// 获取对应的DOM元素
const selectBranch = document.getElementById('selectbranch');
const targetInput = document.getElementById('targetInput'); // 替换成你实际的输入框ID

// 监听下拉框选中变化事件
selectBranch.addEventListener('change', function() {
  // 获取当前选中的选项
  const selectedOption = this.selectedOptions[0];
  // 把选中项的显示文本赋值给输入框
  targetInput.value = selectedOption.text;
});

针对二级筛选的适配 #

如果你的第二个下拉框（id="branch"）也是需要同样处理的二级筛选框，逻辑完全一样，只需要给它也加一个监听事件就行：

const branchSelect = document.getElementById('branch');
// 假设第二个输入框ID是branchInput
const branchInput = document.getElementById('branchInput');

branchSelect.addEventListener('change', function() {
  const selectedOption = this.selectedOptions[0];
  branchInput.value = selectedOption.text;
});

额外优化：处理默认选项 #

如果你的下拉框有默认的-Select-选项（就像你代码里的第一个<option>），可以加个判断，避免把默认文本复制到输入框：

selectBranch.addEventListener('change', function() {
  const selectedOption = this.selectedOptions[0];
  // 只有当选中的不是默认空值选项时，才复制文本
  if (selectedOption.value !== '') {
    targetInput.value = selectedOption.text;
  } else {
    // 选中默认选项时清空输入框
    targetInput.value = '';
  }
});

这样就能完美实现你要的效果啦，直接替换成你实际的元素ID就能用！

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