Question

我有一个for循环，在其中循环访问数组并形成一个<select>菜单。在每次迭代中，我都希望在<select>中设置所选项目。我正在使用select.value = value更改选定的项目，但不会更改选定的项目。

单步执行google chrome调试器时，我看到所选项目被临时更改，但是当当前迭代结束时，出于某些奇怪的原因，所选项目被更改为第一个<option>。这是完整的代码：

document.getElementById("list").innerHTML = "";
var content = msg.content;
var i;

var list = document.getElementById("list");
// Printing employees
for (i = 0; i < content.length; i++) {

  list.innerHTML += content[i].firstName +
    " " +
    content[i].lastName +
    " " +
    content[i].email +
    " " +
    content[i].role.rolePriority +
    " ";

  var select = document.createElement("select");

  var option1 = document.createElement("option");
  option1.value = "0";
  option1.text = "Superadmin";
  var option2 = document.createElement("option");
  option2.value = "1";
  option2.text = "Admin";
  var option3 = document.createElement("option");
  option3.value = "2";
  option3.text = "User";
  select.appendChild(option1);
  select.appendChild(option2);
  select.appendChild(option3);
  select.id = "select_" + content[i].email;

  select.value = content[i].role.rolePriority;
  list.appendChild(select);
  list.innerHTML += '<a href="#" onClick="updateRole(\'' + content[i].email + '\')">update role</a> </br>';

修改

我发现，当我在select.value上使用innerHTML时，select更改了list的属性（并更改了所选项目）。

Answer 1

这是因为它在for循环之后呈现代码，因此在js中被选中，但在html中未被选中。

要选择默认值，应对内容数组执行其他for循环，然后在其中选择该值。

 document.getElementById("list").innerHTML = "";
    var element={firstName: "mario",lastName: "rossi",email: "test@test.ts",role:{rolePriority:2}};
    var element2={firstName: "mario2",lastName: "rossi",email: "test2@test.ts",role:{rolePriority:1}};
    var element3={firstName: "mario3",lastName: "rossi",email: "test3@test.ts",role:{rolePriority:2}};
    var content = [];
    content.push(element);
    content.push(element2);
    content.push(element3);
    var i;
    
    var list = document.getElementById("list");
    // Printing employees
    for (i = 0; i < content.length; i++) {
    
      list.innerHTML += content[i].firstName +
        " " +
        content[i].lastName +
        " " +
        content[i].email +
        " " +
        content[i].role.rolePriority +
        " ";
    
      var select = document.createElement("select");
    
      var option1 = document.createElement("option");
      option1.value = "0";
      option1.text = "Superadmin";
      var option2 = document.createElement("option");
      option2.value = "1";
      option2.text = "Admin";
      var option3 = document.createElement("option");
      option3.value = "2";
      option3.text = "User";
      select.appendChild(option1);
      select.appendChild(option2);
      select.appendChild(option3);
      select.id = "select_" + content[i].email;
    
      
      list.appendChild(select);

      
      list.innerHTML += '<a href="#" onClick="updateRole(\'' + content[i].email + '\')">update role</a> </br>';
    }
    for (i = 0; i < content.length; i++) {
      document.getElementById("select_" + content[i].email).value=content[i].role.rolePriority;
    }

<div id="list">
</div>

Select.value属性未保留更改，javascript

1 个答案: