如何在创建表时在动态创建的 Select 中设置 Option 元素的值

Question

我正在表中动态创建一个下拉列表，并希望将下拉列表的值设置为当前值（然后用户可以将其更改为其他值之一）。 该行看起来像这样（有多行）：

在这种情况下，PAR 的值最初应为 2（每行可以有不同的初始值）。

代码是：

html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"
for (let i = 0; i <= paraArray; i++) {
    html += "<option name='parRatingOption' value='" + parRatingArray[i] + "'>" + parRatingArray[i] + "</option>"
};
html += "</select></td>";
// set the current option to this.parRating 

Answer 1

看来，您需要将“selected”属性添加到<option> ，您需要

像这样的东西：

html += "<td style='width : 1%; white-space: nowrap;'><select 
        name='parRating'>";
let selectedValue = "2"; // <-- 
let selected = "";
for (let i = 0; i <= paraArray; i++) {
  selected =  parRatingArray[i] == selectedValue ? " selected "  : "";
  html += "<option "+selected+" name='parRatingOption' value='" + parRatingArray[i] + 
     "'>" + parRatingArray[i] + "</option>"
};
html += "</select></td>";

// 将当前选项设置为 this.parRating

Answer 2

您可以使用模板文字：

html += `<option name='parRatingOption' value='${parRatingArray[i]}'>${parRatingArray[i]}</option>`

这也有助于避免笨拙的弦线接头。 最佳实践是创建一个函数，该函数生成 n 个选项，其中选择了一个：

const generateOptions = (n, selectedOne) => {
    let options = ''
    for(let i=0; i<n; i++){
        options+=`<option name='parRatingOption' ${i===selectedOne ? 'selected' : ''} value='${parRatingArray[i]}'>${parRatingArray[i]}</option>`
    }
    return options;
}

html+=`<td style='width : 1%; white-space: nowrap;'>
          <select name='parRating'>
             ${generateOptions(5, 2)}
          </select>
       </td>`

这会动态生成 5 个输入，并选择第二个

Answer 3

我修改了 Abdullokh 和 Alex 的答案，并在选项元素中添加了“selected”：

html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"
for (let i = 0; i <= paraArray; i++) {
    if (this.parRating  == parRatingArray[i]) {
        // set the current option to this.parRating 
        html += "<option selected name='parRatingOption' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>"
    }else {
        html += "<option name='parRatingOption' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>"
    }
};
html += "</select></td>";