質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

747閲覧

selectタグで人数を選択し、選択した人数分のブロックを表示させたい

Rasny

総合スコア21

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/12/09 10:17

編集2018/12/09 11:27

前提・実現したいこと

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人分とかとても書き切れない。
ページロードした時点で全部表示されるし。
配列とかそういうのを使うのかな…とは思うのですが、難しくてわかりませんでした。
どうぞ宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/12/09 10:38

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

ベストアンサー

HTML

1<select class="test" name="" id=""> 2 <option value="1">1人</option> 3 <option value="2">2人</option> 4 <option value="3">3人</option> 5 <option value="4">4人</option> 6 <option value="5">5人</option> 7 <option value="6">6人</option> 8 <option value="7">7人</option> 9 <option value="8">8人</option> 10 <option value="9">9人</option> 11 <option value="10">10人</option> 12 <option value="11">11人</option> 13 <option value="12">12人</option> 14 <option value="13">13人</option> 15 <option value="14">14人</option> 16 <option value="15">15人</option> 17 <option value="16">16人</option> 18 <option value="17">17人</option> 19 <option value="18">18人</option> 20 <option value="19">19人</option> 21 <option value="20">20人</option> 22</select> 23 24<div id="wrap"> 25 <div id="member1">メンバー1</div> 26 <div id="member2">メンバー2</div> 27 <div id="member3">メンバー3</div> 28 <div id="member4">メンバー4</div> 29 <div id="member5">メンバー5</div> 30 <div id="member6">メンバー6</div> 31 <div id="member7">メンバー7</div> 32 <div id="member8">メンバー8</div> 33 <div id="member9">メンバー9</div> 34 <div id="member10">メンバー10</div> 35 <div id="member11">メンバー11</div> 36 <div id="member12">メンバー12</div> 37 <div id="member13">メンバー13</div> 38 <div id="member14">メンバー14</div> 39 <div id="member15">メンバー15</div> 40 <div id="member16">メンバー16</div> 41 <div id="member17">メンバー17</div> 42 <div id="member18">メンバー18</div> 43 <div id="member19">メンバー19</div> 44 <div id="member20">メンバー20</div> 45</div>

js

1jQuery( function( $ ) { 2 $( '.test' ).change(function() { 3 var test_val = $( this ).val(); 4 $( '#wrap>div' ).show(); 5 $( '#wrap>div' ).filter( ':nth-child(' + test_val + ') ~ div' ).hide(); 6 } ).trigger( 'change' ); 7} ); 8```**動くサンプル:**[https://jsfiddle.net/hx1zrqca/](https://jsfiddle.net/hx1zrqca/) 9 10CSS セレクター | MDN11[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors#Combinators](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors#Combinators)

投稿2018/12/09 11:53

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Rasny

2018/12/09 15:41

無事に想像通りに動きました! 本当に助かりました、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問