前提・実現したいこと
HTMLで、最初にselectタグで参加人数を選択し、選択した人数分のブロックを表示するという動作をしたいです。(今回はMAX20)
1番目は常に表示、2番目以降のブロックは予め display:none; で非表示にしておき、
selectの数によって表示/非表示を切り替えたいです。
selectの数と同じだけ表示域も増えていく感じです。
select:option value = 120 / div:#member120 として、
#member1 は常に表示 / #member2~20 のスタイルは初期値 display:none;
Javascriptでスタイルを切り替えるのではないかと予想していろいろ調べたのですが、
今まで触れたことがないので難しくてよくわかりませんでした。すみません。
HTMLのみの記述にて失礼致します。
該当のソースコード
[HTML]
<!--人数の選択(Max20までの予定)--> <p><select class="test" name="mem"> <option value="1">1人</option> <=初期値* <option value="2">2人</option> <option value="3">3人</option> <=「3人」を選択した場合...↓* <option value="4">4人</option> …… <option value="20">20人</option> </select></p> <!--選択人数によって変わる--> <div id="member1">メンバー1</div> <=1は常に表示* <div id="member2">メンバー2</div> <div id="member3">メンバー3</div> ---1~3までのメンバーが表示される*--- <div id="member4">メンバー4</div> 以下は非表示のまま* …… <div id="member20">メンバー20</div>
試したこと
必要であれば、jQueryは(わからないながらも)導入しており、追加するだけならなんとかできます。
ちなみに、一生懸命調べて頑張って書いてみたのがコレです。
jQuery(function($){ $(".test").change(function() { var test_val = $(".test").val(); if(test_val == "1") { $('#member1').css('display', 'block'); /*1 表示*/ $('#member2').css('display', 'none'); $('#member3').css('display', 'none'); } else if(test_val == "2") { $('#member1').css('display', 'none'); $('#member2').css('display', 'block'); /*2 表示*/ $('#member3').css('display', 'none'); } else if(test_val == "3") { $('#member1').css('display', 'none'); $('#member2').css('display', 'none'); $('#member3').css('display', 'block'); /* 3 表示*/ } }); });
……現実的ではないですね。20人分とかとても書き切れない。
ページロードした時点で全部表示されるし。
配列とかそういうのを使うのかな…とは思うのですが、難しくてわかりませんでした。
どうぞ宜しくお願いします。
回答1件
あなたの回答
tips
プレビュー