javascriptで動的にチェックボックスのリストを作成するには

UPDATE：Danのコメントごとにコードが更新されました。javascriptで動的にチェックボックスのリストを作成するには

私が取り組んでいるプロジェクトに問題があります。私は上記の選択ドロップダウンで選択されているものに応じて、チェックボックスのリストを作成する必要があります。私はこれに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>

任意の助けいただければ幸いですし、私はあなたがどんな展開に助けを必要に応じて好意を返済するために全力をしようとするだろう。

出典

2012-11-11 stereoscience

'for（optionArrayのvarオプション）'には 'optionArray'のネイティブプロパティがあなたは嫌いです。 [hasOwnProperty]（https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty）を参照してください。 http://jsfiddle.net/dandv/9aZQF/ –

Danさんに感謝します。あなたの入力を反映するようにコードを更新しました。私の主な問題を解決するために必要なことをどうやってやるべきか、どんな考えですか？ – stereoscience

私はちょうど完全な実際の例で、[回答]（http://stackoverflow.com/a/13330382/1269037）を投稿しました:) –

チェックボックスは、type='checkbox'という単純な入力要素です。したがって、少なくとも2つのことを準備する必要があります。ボックスの説明のためのテキストノードとボックス自体です。あなたはすべてのペアのために上記の手順を行う必要があり

// 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);

：この場合は、前に言及し、両方のものが含まれるように<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-11 10:38:55 Zeta

私はこれを投票しますが、私は15の評判を持っていません。しかし、私はそれを答えとしてマークしました。お手伝いありがとう。それはとてもうまくいく。私は似たようなことを試みましたが、うまく動作しませんでした。私の構文は最初は間違っていたと思います。いずれにせよ、あなたは仕事をしなければなりません、そして、私はあなたに感謝します。今私は数時間で眠り、仕上げることができます。 – stereoscience

@stereoscience：どうぞよろしくお願いいたします。もう一つの注意点として、配列に対して 'for（x in object）'ループを使わないでください。代わりに 'for（i = 0; i Zeta

私はそれを覚えて、それを撃つ。 – stereoscience

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

をチェックボックス
そのラベル
おそらく<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-11 10:39:42

入力いただきありがとうございます。私は既に働いていたゼータの答えを見ていました。しかし、私はそれをより良く見せるために提案したbrを追加しました。 – stereoscience

javascriptで動的にチェックボックスのリストを作成するには

答えて

関連する問題