如何在表格内动态创建Select元素时设置其Option选项的默认值

你可以通过两种方式实现默认值设置： #

方案1：拼接HTML时直接添加selected属性（推荐） #

在循环生成option标签的阶段，直接判断当前option值是否匹配目标默认值，匹配则追加selected属性即可，修改后代码如下：

html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"
// 此处修正原代码循环边界的潜在问题：原i <= paraArray大概率为笔误，数组遍历建议直接取数组长度
for (let i = 0; i < parRatingArray.length; i++) {
    const optionVal = parRatingArray[i]
    // 匹配默认值则添加选中属性
    const selected = optionVal === this.parRating ? "selected" : ""
    html += `<option name='parRatingOption' value='${optionVal}' ${selected}>${optionVal}</option>`
};
html += "</select></td>";

方案2：DOM插入完成后通过属性赋值设置 #

如果已经完成HTML拼接，也可以在HTML插入页面DOM之后，选中对应select元素直接赋值value实现默认选中：

// 需替换下方选择器匹配你实际生成的select元素，比如按行索引定位
const currentSelect = document.querySelector('select[name="parRating"]')
currentSelect.value = this.parRating

注意事项 #

• 确保this.parRating和parRatingArray中元素的数据类型一致，比如同为数字或同为字符串，避免全等判断失效导致默认值不生效
• 如果是多行表格场景，建议给每行的select添加唯一标识（比如绑定行ID到自定义属性），避免方案2中选择器匹配到错误的下拉元素

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