javascript - 追加 <select> 元素列表

Question

我正在尝试创建一个按钮，该按钮调用一个函数来创建带有选择框的新列表项。下面的代码创建了一个选择元素，但是按钮消失了，它不会一个接一个地创建列表项。知道如何保留按钮并一个接一个地添加选择元素吗？

<button type="button" onclick="createTable()">Add Item</button>

function createTable() 
{
     var itemName = "Selections: "; 
     document.write(itemName);

     for (var i=0;i<7;i++) 
      {
      var myTable = " ";
      myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>";
      myTable+="<option value='zeroPoint'>0</option>";
      myTable+="<option value='halfPoint'>1/2</option>"; 
      myTable+="<option value='onePoint'>1</option>";
      myTable+="</select>";
      document.write(myTable);
      }
}

Answer 1

我对您的 documnet.write 方式做了一些更改。但是，我强烈建议动态创建 html dom 节点。我添加了另一种方法 createTable2，它可以完成所需的工作。您还可以更轻松地保留您拥有的 html 内容，这些内容可以很容易地用 document.write 方式覆盖。

编辑:

我又添加了一个方法 createTable2，以允许添加多个选择。您可以使用您拥有的选择和选项信息传递一个模型。有一个标志，empty，如果您想在添加新选择之前清空 div，则将其设置为 true；即 createTable3(true)。

function createTable() 
{
 var itemName = "Selections: "; 
 var selectElement = document.getElementById("render");

 for (var i=0;i<7;i++) 
  {
  var myTable = " ";
  myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>";
  myTable+="<option value='zeroPoint'>0</option>";
  myTable+="<option value='halfPoint'>1/2</option>"; 
  myTable+="<option value='onePoint'>1</option>";
  myTable+="</select>";
  selectElement.innerHTML = myTable;
  }
}

function createTable2(){

var myDiv = document.getElementById("render");

//Create array of options to be added
var array = ["zeroPoint","halfPoint","onePoint"];
var texts = ["1","1/2","1"];

var selectList = document.createElement("select");
selectList.id = "mySelect";
selectList.style.fontSize = "10px";
selectList.onChange = 'Calculate()';
myDiv.appendChild(selectList);

//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i];
    option.text = texts[i];
    selectList.appendChild(option);
}

}



function createTable3(empty){

var myDiv = document.getElementById("render");
if(empty){
  myDiv.innerHTML = "";
}
let model = {

"select1": [{value: "zeroPoint", label: "1"},
          {value: "halfPoint", label: "1/2"},
          {value: "onePoint", label: "1"}],

"select2": [{value: "zeroPoint1", label: "11"},
          {value: "halfPoint1", label: "11/22"},
          {value: "onePoint1", label: "11"}]

};

Object.keys(model).forEach(function(key){
  let entry = model[key];
  var selectList = document.createElement("select");
  selectList.id = key;
  selectList.style.fontSize = "10px";
  myDiv.appendChild(selectList);

  //Create and append the options
  for (var i = 0, item;  item = entry[i]; i++) {
      var option = document.createElement("option");
      option.value = item.value;
      option.text = item.label;
      selectList.appendChild(option);
  }
});

}

<button type="button" onclick="createTable3()">Add Item</button>
<div id= "render"/>