/ / JQueryは、ドロップダウンに基づいてdivとフォーム要素を表示します-javascript、jquery、html-select

JQueryは、ドロップダウンに基づいてdivsとform要素を表示する - javascript、jquery、html-select

JQueryの経験は最小限です。 divの表示/非表示などの単純なことです。私が達成しようとしているのは、ドロップダウン値に基づいて新しいフォーム要素を表示/作成し、id値を割り当てることです。

たとえば、ドロップからオプション5を選択した場合下に、#group divを5回表示または書き込み、値を割り当てる必要があります。次の例は、オプション5を選択した場合に、どのように取得するかを示しています。 10または20を実行した場合、10回表示されます。2を実行した場合、2回表示されます。 jqueryの外でdocument.writeでこれを実現できますが、もっと簡単な方法があるようです...

<select name="amount" id="amount" title="amount">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05" selected="selected">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select>

<div id="group">
<input name="group[1][]" type="checkbox" id="group[1][]" title="group[1][]" value="1">
<input name="group[1][]" type="checkbox" id="group[1][]" title="group[1][]" value="2">
<input name="group[1][]" type="checkbox" id="group[1][]" title="group[1][]" value="3">
<input name="group[1][]" type="checkbox" id="group[1][]" title="group[1][]" value="4">
</div>

<div id="group">
<input name="group[2][]" type="checkbox" id="group[2][]" title="group[2][]" value="1">
<input name="group[2][]" type="checkbox" id="group[2][]" title="group[2][]" value="2">
<input name="group[2][]" type="checkbox" id="group[2][]" title="group[2][]" value="3">
<input name="group[2][]" type="checkbox" id="group[2][]" title="group[2][]" value="4">
</div>

<div id="group">
<input name="group[3][]" type="checkbox" id="group[3][]" title="group[3][]" value="1">
<input name="group[3][]" type="checkbox" id="group[3][]" title="group[3][]" value="2">
<input name="group[3][]" type="checkbox" id="group[3][]" title="group[3][]" value="3">
<input name="group[3][]" type="checkbox" id="group[3][]" title="group[3][]" value="4">
</div>

<div id="group">
<input name="group[4][]" type="checkbox" id="group[4][]" title="group[4][]" value="1">
<input name="group[4][]" type="checkbox" id="group[4][]" title="group[4][]" value="2">
<input name="group[4][]" type="checkbox" id="group[4][]" title="group[4][]" value="3">
<input name="group[4][]" type="checkbox" id="group[4][]" title="group[4][]" value="4">
</div>

<div id="group">
<input name="group[5][]" type="checkbox" id="group[5][]" title="group[5][]" value="1">
<input name="group[5][]" type="checkbox" id="group[5][]" title="group[5][]" value="2">
<input name="group[5][]" type="checkbox" id="group[5][]" title="group[5][]" value="3">
<input name="group[5][]" type="checkbox" id="group[5][]" title="group[5][]" value="4">
</div>

回答:

回答№1は1

私は #groups 行を追加し、ドロップダウンから新しい番号が選択されるたびにクリアすることができるdiv。また、ゼロのデフォルト値を追加して開始しました。

$(document).ready(function(){
$("#amount").change(function(){
$("#groups").empty();
var group = "";
var number = parseInt($(this).val());
for(var i=1;i<=number;i++){
group += "<div id="group">" +
"<input name="group["+i+"][]" type="checkbox" id="group["+i+"][]" title="group["+i+"][]" value="1">" +
"<input name="group["+i+"][]" type="checkbox" id="group["+i+"][]" title="group["+i+"][]" value="2">" +
"<input name="group["+i+"][]" type="checkbox" id="group["+i+"][]" title="group["+i+"][]" value="3">" +
"<input name="group["+i+"][]" type="checkbox" id="group["+i+"][]" title="group["+i+"][]" value="4">" +
"</div>";
}
$("#groups").append(group);
});
});

http://jsfiddle.net/L73cd/1/