如何实现下拉列表根据字段标签匹配值自动选中功能？

嘿，这个需求很好实现，我给你准备了两种方案，原生JavaScript和jQuery版本的，你可以根据你的项目技术栈来选择：

这种方案不需要依赖任何库，兼容性也很好：

// 获取标签文本，去除前后多余空格
const labelText = document.querySelector('.form-group label').textContent.trim();
// 获取下拉列表元素
const selectElement = document.getElementById('ddlProductCode');

// 遍历所有选项，匹配值与标签文本一致的选项
for (const option of selectElement.options) {
  if (option.value === labelText) {
    option.selected = true;
    break; // 找到匹配项后停止遍历，提升效率
  }
}

代码说明： #

• trim() 是为了处理标签文本可能存在的前后空格，避免因为空格导致匹配失败
• 遍历选项时一旦找到匹配项就停止循环，不用遍历全部选项，更高效
• 如果没有找到匹配的选项，下拉列表会保持默认的--Select--选中状态

如果你的项目已经引入了jQuery，那可以用更简洁的代码完成：

// 获取标签文本并去除空格
const labelText = $('.form-group label').text().trim();
// 直接通过val()方法设置下拉列表选中值
$('#ddlProductCode').val(labelText);

代码说明： #

• jQuery的val()方法会自动找到对应value的选项并设置为选中状态，非常省心
• 同样用trim()处理标签文本的空格问题，确保匹配准确

你只需要把这段代码放在页面加载完成的事件里（比如DOMContentLoaded或者jQuery的$(document).ready()），就能在页面加载时自动完成选中操作啦～

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