答案 0 :(得分：2)
我对documnet.write的方式进行了一些更改。但是，我强烈建议动态创建html dom节点。我添加了另一个方法createTable2，它执行所需的操作。您也可以更轻松地保留您拥有的html内容，这些内容可以使用document.write方式轻松编写。
修改
我添加了另一个方法createTable2，以允许添加多个选择。您可以使用您拥有的选择和选项信息传递模型。有一个标志，为空，如果你想在添加新选择之前清空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"/>
答案 1 :(得分：0)
如果您使用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;
}
}
答案 2 :(得分：0)
我不确定你究竟想要实现什么，但是在字符串中使用DOM元素然后修改元素innerHTML或使用document.write只是一个黑客。您需要利用DOM apis。
虽然这意味着我的代码可能是代码大小的两倍或三倍。它是长期可维护的版本。
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);
}select {
font-size:10px
}<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>
答案 3 :(得分：0)
到目前为止，所有答案都指出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
我使用了模板字符串，因此插值是可能的，更清晰一点。并且在保留你的逻辑的同时分离逻辑。