代码之家 › 专栏 › 技术社区 › Gavrilo Adamovic

select.value属性不持久更改,javascript

html javascript

Gavrilo Adamovic · 技术社区 · 6 年前

我有一个for循环,在这个循环中我迭代数组并形成一个 <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 上 list .

1 回复 | 直到 6 年前

Federico Bassini 6 年前

这是因为它在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>