Question

我正在尝试创建一个按钮，该按钮调用一个函数，该函数使用选择框创建新的列表项。下面的代码创建一个选择元素，然而，该按钮消失，并且它不会创建一个又一个列表项。知道如何坚持按钮并添加一个选择元素吗？＆lt; button type =“button”onclick =“createTable（）”＆gt; Add Item＆lt; / button＆gt; function createTable（） { var itemName =“选择：”; 文件撰写（ITEMNAME）; for（var i = 0; i＆lt; 7; i ++） { var myTable =“”; myTable + =“＆lt; select name ='test'id ='mySelect”+ i +“'style ='font-size：10px'onchange ='Calculate（）'＆gt;”; myTable + =“＆lt; option value ='zeroPoint'＆gt; 0＆lt; / option＆gt;”; myTable + =“＆lt; option value ='halfPoint'＆gt; 1/2＆lt; / option＆gt;”; myTable + =“＆lt; option value ='onePoint'＆gt; 1＆lt; / option＆gt;”; myTable的+ = “＆LT; /选择＆gt;” 中; 文件撰写（myTable的）; } }

Answer 1

我对documnet.write的方式进行了一些更改。但是，我强烈建议动态创建html dom节点。我添加了另一个方法createTable2，它执行所需的操作。您也可以更轻松地保留您拥有的html内容，这些内容可以使用document.write方式轻松编写。

修改

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

＆＃13;
＆＃13;
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); } }); }
＆＃13;
<button type="button" onclick="createTable3()">Add Item</button> <div id= "render"/>
＆＃13;
＆＃13;
＆＃13;

Answer 2

如果您使用document.write（＆＃34;＆＃34;），整个网页内容将被您在document.write函数中传递的内容替换。而是在按钮元素下创建一个div元素，如

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

然后在javascript文件中更改为

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

 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;
  }
}

Answer 3

我不确定你究竟想要实现什么，但是在字符串中使用DOM元素然后修改元素innerHTML或使用document.write只是一个黑客。您需要利用DOM apis。

虽然这意味着我的代码可能是代码大小的两倍或三倍。它是长期可维护的版本。

＆＃13;

function createTable() {
     var selectMenu = document.querySelector('#selectionsContainer');
     
      // Array of options elements
      var myTable = [];
      
      // Pushing some elements to our my table array
      // 
      myTable.push( 
        createOption('zeroPoint', 0),        
        createOption('halfPoint', 0.5), 
        createOption('onePoint', 1) 
      )
      // Looping through all elements and adding them to the          //selections container
      //
      myTable.forEach( element => {
        selectionsContainer.appendChild(element);
      });
}

/** Creates an option element and returns it for usage */
function createOption(value, label) {
 var option = document.createElement('option');
 option.value = value;
 option.innerText = label;
 
 return option;
}

function Calculate(value) {
  console.log('do whatever you want to with the value: ', value);
}

＆＃13;

select { 
  font-size:10px
 }

＆＃13;

<button type="button" onclick="createTable()">Add Item</button>

<label for="selectionsContainer">
    Selections
<label>
<select id="selectionsContainer" onchange='Calculate(this.value)'>
  <option value=5> 5 </option>
<select>

＆＃13;

Answer 4

到目前为止，所有答案都指出OP可能因为没有动态创建选择而做错了。但我们不了解他的要求。

此外，每个人都已经解释过document.write会在你的整个文档上写下来，从而删除所有内容，你不希望这样。

document.write - ＆gt; https://developer.mozilla.org/en-US/docs/Web/API/Document/write

应该使用appendChild，但是你想要一个字符串，而appendChild期望Node不是字符串。

appendChild - ＆gt; https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

节点 - ＆gt; https://developer.mozilla.org/en-US/docs/Web/API/Node

所以解决这个问题的唯一方法是使用innerHTML并通过添加新的Html来总结内部Html。

或者通过从sting创建节点，这需要更多逻辑，请参阅此处 - ＆gt; Creating a new DOM element from an HTML string using built-in DOM methods or prototype

innerHTML - ＆gt; https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

const selectTamplate = (selectId, onChangeCallbackName) => {
  return `
    <select name='test' id='mySelect${selectId}' style='font-size:10px' onchange='${onChangeCallbackName}()'>
     <option value='zeroPoint'>0</option>
     <option value='halfPoint'>1/2</option>
     <option value='onePoint'>1</option>
    </select> 
  `
};

const appendStringHtml = (elementTargetHtml, elemenAppend) => {
  elemenAppend.innerHTML += elementTargetHtml;
}

const doSomethingOnChange = () => {
  console.log('I am the KING!');
};

const placeToAppend = document.querySelector('.append-selects-here');
const buttonAppender = document.querySelector('.btn-append');
let selectID = 1;

buttonAppender.addEventListener('click', ()=>{
  const selectHTML = selectTamplate(selectID, 'doSomethingOnChange');
  appendStringHtml(selectHTML, placeToAppend);
  selectID ++;
});

<button class="btn-append">Add Selects</button>
<div class="append-selects-here"></div>

在此处查看工作代码 - ＆gt; https://codepen.io/nikolamitic/pen/PEpEbj

我使用了模板字符串，因此插值是可能的，更清晰一点。并且在保留你的逻辑的同时分离逻辑。

附加<select>元素列表

4 个答案: