当<option>的value属性包含斜杠时，如何选中对应选项？

嘿，这个问题其实挺常见的——不管option的value里有没有斜杠，选中它的核心逻辑都是精准匹配对应的value值，只是要注意字符串的正确处理就行。下面给你几种实用的实现方式：

原生JavaScript实现 #

方法1：直接设置select的value属性 #

这是最简单的方式，斜杠在字符串里就是普通字符，不需要额外转义，只要把目标value值直接赋值给select元素的value属性即可。比如假设你有个option的value是"about/our-team"，代码如下：

// 获取select元素
const aboutSelect = document.getElementById('aboutus');
// 直接赋值目标value
aboutSelect.value = 'about/our-team';

方法2：遍历option元素设置选中状态 #

如果需要更精细的控制（比如同时做一些额外判断），可以遍历所有option，找到value匹配的项后设置selected属性为true：

const aboutSelect = document.getElementById('aboutus');
// 遍历所有option
for (let i = 0; i < aboutSelect.options.length; i++) {
  const option = aboutSelect.options[i];
  // 匹配目标value（注意完全一致，包括斜杠）
  if (option.value === 'about/our-team') {
    option.selected = true;
    break; // 找到后退出循环，提升效率
  }
}

jQuery实现（如果项目使用jQuery） #

如果你的项目里引入了jQuery，那就更简单了，直接用val()方法赋值即可，jQuery会自动处理字符串中的斜杠：

$('#aboutus').val('about/our-team');

注意事项 #

• 确保赋值的字符串和option的value属性完全匹配：包括大小写、斜杠的数量、前后是否有空格等，比如"about/team"和"about//team"是两个不同的value。
• 如果是动态生成的option标签，一定要等DOM加载完成后再执行选中代码，否则会找不到目标元素。比如把代码放在DOMContentLoaded事件回调里，或者页面底部。

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