Question

更新：根据Dan的评论更新了代码。

我对我正在进行的项目有疑问。我需要创建一个复选框列表，具体取决于上面选择下拉菜单中选择的内容。我想用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>

如果您需要任何开发方面的帮助，我将非常感谢您提供的帮助。

Answer 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 = '';

Answer 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"));    
    }
}

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

2 个答案: