web-dev-qa-db-ja.com

JavaScriptで動的にチェックボックスのリストを作成する方法

更新：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>

どんな助けでも大いに感謝されます、そして、あなたがどんな開発でも助けが必要になったならば、私はその恩恵を返済するために最善を尽くします。

javascripthtmldynamicdrop-down-menucheckbox
8
stereoscience

チェックボックスは、type='checkbox'を使用した単純な入力要素です。したがって、少なくとも2つのものを準備する必要があります。ボックスの説明用のテキストノードとボックス自体です。この場合は、<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 = '';
17
Zeta

チェックボックスを動的に作成するプロセスは、実際には選択オプションを作成するよりも少し複雑です。以下を作成する必要があります。

  • チェックボックス
  • そのラベル
  • そしておそらく<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"));    
    }
}
8
Dan Dascalescu