如何使用javascript动态创建复选框列表答案

【问题标题】：How to create list of checkboxes dynamically with javascript如何使用javascript动态创建复选框列表
【发布时间】：2012-10-31 01:53:58
【问题描述】：

更新：已根据 Dan 的 cmets 更新代码。

我正在处理的项目有问题。我需要根据在上面的选择下拉列表中选择的内容创建一个复选框列表。我想为此使用javascript。我能够根据上面的选择创建一个选择下拉列表，但客户需要复选框。我认为它基本上会以相同的方式完成，除了这次制作复选框，但我无法让它工作。我通常使用 php 进行编程，因此不太了解 javascript。这是我必须制作选择下拉列表的代码.... 将其设为复选框列表的最佳方法是什么？请注意，此代码已大大减少以使其易于阅读（此处仅显示重要部分）。

代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function populate(slct1,slct2){
var s1 = document.getElementById(slct1);
var s2 = document.getElementById(slct2);
s2.innerHTML = "";
if(s1.value == "Cat1"){
    var optionArray = ["Subcat1","Subcat1.1","Subcat1.2"];
} else if(s1.value == "Cat2"){
    var optionArray = ["Subcat2","Subcat2.1","Subcat2.2"];
} else if(s1.value == "Cat3"){
    var optionArray = ["Subcat3","Subcat3.1","Subcat3.3"];
}
for(var option in optionArray){
     if (optionArray.hasOwnProperty(option)) {
        var pair = optionArray[option];
        var newOption = document.createElement("option");
        newOption.value = pair;
        newOption.innerHTML = pair;
        s2.options.add(newOption);
    }
}
}
</script>
</head>
<body>
<h2>Dynamic Select Dropdown</h2>
<hr />
Choose a Category:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
   <option value=""></option>
   <option value="Cat1">Cat1</option>
   <option value="Cat2">Cat2</option>
   <option value="Cat3">Cat3</option>
</select>
<hr />
   Choose Subcategory:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>

任何帮助都将不胜感激，如果您在任何开发方面需要帮助，我会尽力报答。

【问题讨论】：

请注意，for(var option in optionArray) 也将包含 optionArray 的本机属性，这是您不想要的。见hasOwnProperty。 jsfiddle.net/dandv/9aZQF
谢谢丹。我更新了代码以反映您的输入。关于如何做我需要做的事情来解决我的主要问题的任何想法？
我刚刚发布了the answer，并附有一个完整的工作示例:)

标签： javascript html dynamic drop-down-menu checkbox

【解决方案1】：

复选框是带有type='checkbox' 的简单输入元素。所以你至少要准备两件事：一个用于描述盒子的文本节点和盒子本身。在这种情况下，最好使用<label> 元素来包含前面提到的两件事：

// create the necessary elements
var label= document.createElement("label");
var description = document.createTextNode(pair);
var checkbox = document.createElement("input");

checkbox.type = "checkbox";    // make the element a checkbox
checkbox.name = "slct[]";      // give it a name we can check on the server side
checkbox.value = pair;         // make its value "pair"

label.appendChild(checkbox);   // add the box to the element
label.appendChild(description);// add the description to the element

// add the label element to your div
document.getElementById('some_div').appendChild(label);

您必须对每一对都执行上述步骤。请注意，您必须在填充之前清除给定的<div id="some_div"></div>：

// clear the former content of a given <div id="some_div"></div>
document.getElementById('some_div').innerHTML = '';

【讨论】：

我会投票赞成，但我没有 15 声望。但我确实将其标记为答案。感谢您的帮助。它工作得很好。我曾尝试过类似的东西，但无法让它发挥作用。我猜我的语法一开始是错误的。不管怎样，你得工作，我谢谢你。现在我可以在几个小时内睡觉并完成工作。
@stereoscience：不客气。进一步说明：不要对数组使用for( x in object) 循环。而是使用for(i = 0; i < array.length; ++i)。另请参阅the remark in the description on MDN。
我会记住并试一试。
这里的'pair'是一个用户定义的变量。在其中传递复选框的文本。

【解决方案2】：

动态创建复选框的过程确实比创建选择选项要复杂一些。您需要创建：

复选框
它的标签
可能还有<br> 用于样式

这是代码的要点，完整的小提琴在http://jsfiddle.net/dandv/9aZQF/2/：

for (var option in optionArray) {
    if (optionArray.hasOwnProperty(option)) {
        var pair = optionArray[option];
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.name = pair;
        checkbox.value = pair;
        s2.appendChild(checkbox);

        var label = document.createElement('label')
        label.htmlFor = pair;
        label.appendChild(document.createTextNode(pair));

        s2.appendChild(label);
        s2.appendChild(document.createElement("br"));    
    }
}

【讨论】：

感谢您的意见。我已经看到了 Zeta 的回答。但我确实添加了您建议的行 br 以使其看起来更好。