JavaScript中能否不使用value属性设置select下拉框的选中项

完全可以在不修改原有value属性、不影响遗留代码运行的前提下实现精准选中指定选项，以下是两种可行方案：

方案1：新增自定义data属性匹配（推荐，稳定性更高） #

该方案仅给option新增规范的自定义属性，不会修改原有逻辑依赖的value值，完全不会触发旧代码报错。

1. 给所有option添加唯一的data-*自定义属性，示例修改后的HTML如下：

<select multiselect="false" name="some.name" size="1" id="queuePicklist" onchange="setQueue();" required="true">
  <option id="selectOption" hidden="true" disabled="true" selected="true" value="" style="display: none">Select an option</option>
  <option value="1" label="Support" data-queue-key="support">Support</option>
  <option value="2" label=" Team Sales" data-queue-key="team-sales">Team Sales</option>
  <option value="1" label="Individual Sales" data-queue-key="individual-sales">Individual Sales</option>
  <option value="1" label="Billing" data-queue-key="billing">Billing</option>
  <option value="1" label="Other" data-queue-key="other">Other</option>
</select>

2. 在setQueue()函数中通过自定义属性匹配选中对应选项，示例代码：

function setQueue() {
  // 示例：选中Billing选项
  const targetOption = document.querySelector('#queuePicklist option[data-queue-key="billing"]');
  if (targetOption) {
    targetOption.selected = true;
    // 若需要手动触发select的change事件可添加下行代码
    // document.getElementById('queuePicklist').dispatchEvent(new Event('change'));
  }
}

方案2：无需新增属性，通过现有属性/文本匹配 #

如果不想修改HTML结构，也可以通过原有label属性或者option的文本内容匹配选中：

// 方式1：通过label属性匹配
const targetOption = document.querySelector('#queuePicklist option[label="Billing"]');

// 方式2：通过option文本内容匹配
const targetOption = [...document.querySelectorAll('#queuePicklist option')].find(
  opt => opt.textContent.trim() === 'Billing'
);

// 置为选中逻辑和方案1一致
if (targetOption) targetOption.selected = true;

注意事项 #

• 两种方案均不修改原有value属性值，原有遗留代码读取queuePicklist.value的逻辑完全不受影响
• 自定义data-*属性的命名和取值可根据业务需求自由调整，只要保证唯一即可精准匹配
• 使用文本匹配时需要注意文本前后空格、大小写等问题，避免匹配失败

内容的提问来源于stack exchange，提问作者Bahman.A