10

更新：已根据 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>

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

4

2 回答 2

18

复选框是一个简单的输入元素，带有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 = '';
于 2012-11-11T10:38:55.470 回答
11

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

  • 复选框
  • 它的标签
  • 可能还有一个<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"));    
    }
}
于 2012-11-11T10:39:42.870 回答