使用JavaScript选择下拉框鞋码选项，现有赋值方法无效如何解决？

原有写法的错误点 #

• 错误1：document.getElementById(".shoeSize")语法错误，getElementById参数直接传id字符串即可，不需要加.前缀，.是类选择器专属语法，仅querySelector/querySelectorAll支持，该写法无法找到对应元素。
• 错误2：value = 5类型不匹配，下拉框option的value属性是字符串类型，传入数字5无法匹配到值为"5"的option，导致选中失效。
• 错误3：selectedIndex =5索引对应错误，下拉框索引从0开始计数，第一个隐藏禁用的提示option是索引0，selectedIndex=5实际选中的是value为"6"的EU38.5选项；此外修改selectedIndex/value后没有手动触发change事件，大部分网页的下拉框都绑定了联动逻辑，不触发事件会看起来没有变更效果。

正确实现方案 #

前置要求 #

确保代码在DOM渲染完成后执行，可将代码放在body标签末尾，或者包裹在DOM加载完成的监听事件中：

document.addEventListener('DOMContentLoaded', function() {
  // 选中逻辑写在该回调内
})

方案1：通过value值选中 #

const sizeSelect = document.getElementById('shoeSize');
// 示例为选中EU37，对应value为字符串"5"，注意要加引号匹配字符串类型
sizeSelect.value = '5';
// 手动触发change事件，触发页面绑定的联动逻辑
sizeSelect.dispatchEvent(new Event('change'));

方案2：通过索引选中 #

const sizeSelect = document.getElementById('shoeSize');
// 示例为选中EU37，对应索引是3（索引0是隐藏的提示选项，EU36对应索引1，依次类推）
sizeSelect.selectedIndex = 3;
// 手动触发change事件
sizeSelect.dispatchEvent(new Event('change'));

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