如何用JavaScript设置带data-val属性的select指定选项为选中

直接用原生JavaScript的属性选择器匹配元素即可，全程不需要改动现有HTML结构，代码如下：

// 定位name为properties[Liner]的下拉框
const select = document.querySelector('select[name="properties[Liner]"]');
// 匹配下拉框内data-val为2的选项并设为选中
if (select) {
  const option = select.querySelector('option[data-val="2"]');
  option && (option.selected = true);
  // 如果页面有绑定下拉框change事件的逻辑，需要手动触发事件让监听生效就放开下面的注释
  // select.dispatchEvent(new Event('change'))
}

关键说明 #

• select的name属性包含[]特殊字符，写选择器时必须给属性值加双引号包裹，否则选择器会解析报错
• 单选下拉框只要给目标选项设置selected = true，其余选项会自动取消选中，不需要额外手动重置
• 如果页面用了Vue/React这类前端框架渲染，手动改selected属性默认不会同步框架内部状态，放开上面派发change事件的代码就能触发框架的监听逻辑
• 上述代码兼容所有现代浏览器，不需要引入任何第三方库

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