セレクトボックスで表示を切り替える

Web

2022年12月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、セレクトボックスの選択結果に応じて表示される内容が変わるページを作ってみようと思います。

参考：電脳職人村｜jQuery：セレクトボックスで写真の表示を切り替える

セレクトボックスを準備する

前回作ったセレクトボックス④を使ってみます。

それぞれのoptionに固有のvalue属性を設定しておきます。

<div class="select4">
  <select id="select4" class="sl4" required>
    <option value="honoo">炎の呼吸</option>
    <option value="mizu">水の呼吸</option>
    <option value="kaze">風の呼吸</option>
    <option value="iwa">岩の呼吸</option>
    <option value="kaminari">雷の呼吸</option>
  </select>              
  <span class="sl4_highlight"></span> <span class="sl4_selectbar"></span>
  <label class="sl4_selectlabel">選択してください</label>
</div>

選択してください

表示する内容を用意する

参考にしたサイトでは<ul>と<li>を使っていましたが、うちのサイトでは<ul>と<li>をサイドメニューで使ってしまっているので<dl>と<dt>にしてみました。

<dl>
  <dt></dt>
  <dt></dt>
  ・
  ・
  ・
  <dt></dt>
</dl>

<dt>と</dt>の中に表示する内容を記述します。

<dt>のIDを、対応するoptionのvalueと同じ値にしておきます。

<dl>
  <dt id="honoo">壱の型　不知火</dt>
  <dt id="mizu">壱の型　水面斬り</dt>
  ・
  ・
  ・
  <dt id="kaminari">壱の型　霹靂一閃</dt>
</dl>

このままだとページ読み込み時にすべての項目が表示されてしまっているので、ダミーのdtを1番目に追加し、cssで1番目以外を非表示にします。1番目は「表示されているけど見えない」という状態です。

<dl>
  <dt id="kimetsu" style="visibility: hidden">ダミー</dt>		  
  <dt id="honoo">壱の型　不知火</dt>
  <dt id="mizu">壱の型　水面斬り</dt>
  ・
  ・
  ・
  <dt id="kaminari">壱の型　霹靂一閃</dt>
</dl>

dl dt:nth-of-type(n+2) {
  display: none;
}

JavaScriptを書く

以下のスクリプトを記述します。

$(function() {
  $('#select4').change(function() {
    var val = $(this).val();
    var selectId = '#' + val;
    $('dl dt').hide();
    $(selectId).show();
  });
});

選択したoptionのvalueを取得→IDに変換→すべてのdtとdlを非表示にする→選択したIDだけを表示、というしくみだそうです。勉強になりました。

選択してください

炎の呼吸 壱ノ型　不知火(しらぬい) 弐ノ型　昇(のぼ)り炎天(えんてん ) 参ノ型　気炎万象(きえんばんしょう) 肆ノ型　盛炎(せいえん)のうねり 伍ノ型　炎虎(えんこ) 玖ノ型　煉獄(れんごく)
炎の呼吸 壱ノ型　不知火(しらぬい) 弐ノ型　昇(のぼ)り炎天(えんてん ) 参ノ型　気炎万象(きえんばんしょう) 肆ノ型　盛炎(せいえん)のうねり 伍ノ型　炎虎(えんこ) 玖ノ型　煉獄(れんごく)
恋の呼吸 壱ノ型　初恋(はつこい)のわななき 弐ノ型　懊悩巡(おうのうめぐ)る恋(こい) 参ノ型　恋猫(こいねこ)しぐれ 伍ノ型　揺(ゆ)らめく恋情(れんじょう)・乱(みだ)れ爪(つめ) 陸ノ型　猫足恋風(ねこあしこいかぜ)
水の呼吸 壱ノ型　水面斬(みなもぎ)り 弐ノ型　水車 ( みずぐるま ) 参ノ型　流流舞 ( りゅうりゅうま ) い 肆ノ型　打 ( う ) ち潮 ( しお ) 伍ノ型　干天 ( かんてん ) の慈雨 ( じう ) 陸ノ型　ねじれ渦 ( うず ) 漆ノ型　雫波紋突 ( しずくはもんづ )き 捌ノ型　滝壷 ( たきつぼ ) 玖ノ型　水流飛沫 ( すいりゅうしぶき ) ・乱 ( らん ) 拾ノ型　生生流転 ( せいせいるてん ) 拾壱ノ型　凪 ( なぎ )
蛇の呼吸 壱ノ型　委蛇斬 ( いだぎ ) り 弐ノ型　狭頭 ( きょうず ) の毒牙 ( どくが ) 参ノ型　塒締 ( とぐろじ ) め 肆ノ型　頸蛇双生 ( けいじゃそうせい ) 伍ノ型　蜿蜿長蛇 ( えんえんちょうだ )
花の呼吸 弐ノ型　御影梅 ( みかげうめ ) 肆ノ型　紅花衣 ( べにはなごろも ) 伍ノ型　徒 ( あだ ) の芍薬 ( しゃくやく ) 陸ノ型　渦桃 ( うずもも ) 終ノ型　彼岸朱眼 ( ひがんしゅがん )
蟲の呼吸 蝶 ( ちょう ) の舞い　戯 ( たわむ ) れ 蜂牙 ( ほうが ) の舞い　真靡 ( まなび ) き 蜻蛉 ( せいれい ) の舞い　複眼六角 ( ふくがんろっかく ) 蜈蚣 ( ごこう ) の舞い　百足蛇腹 ( ひゃくそくじゃばら )
風の呼吸 壱ノ型　塵旋風 ( じんせんぷう ) ・削 ( そ ) ぎ 弐ノ型　爪々 ( そうそう ) ・科戸風 ( しなとかぜ ) 参ノ型　晴嵐風樹 ( せいらんふうじゅ ) 肆ノ型　昇上砂塵嵐 ( しょうじょうさじんらん ) 伍ノ型　木枯 ( こが ) らし颪 ( おろし ) 陸ノ型　黒風烟嵐 ( こくふうえんらん ) 漆ノ型　頸風 ( けいふう ) ・天狗風 ( てんぐかぜ ) 捌ノ型　初烈風斬 ( しょれつかざき ) り 玖の型　韋駄天台風 ( いだてんたいふう )
霞の呼吸 壱ノ型　垂天遠霞 ( すいてんとおがすみ ) 弐ノ型　八重霞 ( やえかすみ ) 参ノ型　霞散 ( かさん ) の飛沫 ( しぶき ) 肆ノ型　移流斬 ( いりゅうぎ ) り 伍ノ型　霞雲 ( かうん ) の海 ( うみ ) 陸ノ型　月 ( つき ) の霞消 ( かしょう ) 漆ノ型　朧 ( おぼろ )
獣の呼吸 壱ノ牙　穿 ( うが ) ち抜 ( ぬ ) き 弐ノ牙　切 ( き ) り裂 ( さ ) き 参ノ牙　喰 ( く ) い裂 ( ざ ) き 肆ノ牙　切細裂 ( きりこまざ ) き 伍ノ牙　狂 ( くる ) い裂 ( ざ ) き 陸ノ牙　乱杭咬 ( らんぐいが ) み 漆ノ型　空間識覚 ( くうかんしきかく ) 捌ノ型　爆裂猛進 ( ばくれつもうしん ) 玖ノ牙　伸 ( しん ) ・うねり裂 ( ざ ) き 拾ノ牙　円転旋牙 ( えんてんせんが ) 思い付きの投 ( な ) げ裂 ( ざ ) き
岩の呼吸 壱ノ型　蛇紋岩 ( じゃもんがん ) ・双極 ( そうきょく ) 弐ノ型　天面砕 ( てんめんくだ ) き 参ノ型　岩軀 ( がんく ) の膚 ( はだえ ) 肆ノ型　流紋岩 ( りゅうもんがん ) ・速征 ( そくせい ) 伍ノ型　瓦輪刑部 ( がりんぎょうぶ )
雷の呼吸 壱ノ型　霹靂一閃 ( へきれきいっせん ) 弐ノ型　稲魂 ( いなだま ) 参ノ型　聚蚊成雷 ( しゅうぶんせいらい ) 肆ノ型　遠雷 ( えんらい ) 伍ノ型　熱界雷 ( ねつかいらい ) 陸ノ型　電轟雷轟 ( でんごうらいごう ) 漆ノ型　火雷神 ( ほのいかづちのかみ )
音の呼吸 壱ノ型　轟 ( とどろき ) 肆ノ型　響斬無間 ( きょうざんむけん ) 伍ノ型　鳴弦奏々 ( めいげんそうそう )
日の呼吸 壱ノ型　円舞 ( えんぶ ) 弐ノ型　碧羅 ( へきら ) の天 ( てん ) 参ノ型　烈日紅鏡 ( れつじつこうきょう ) 肆ノ型　灼骨炎陽 ( しゃっこつえんよう ) 伍ノ型　陽華突 ( ようかとつ ) 陸ノ型　日暈 ( にちうん ) の龍 ( りゅう ) ・頭舞 ( かぶりま ) い 漆ノ型　斜陽転身 ( しゃようてんしん ) 捌ノ型　飛輪陽炎 ( ひりんかげろう ) 玖ノ型　輝輝恩光 ( ききおんこう ) 拾ノ型　火車 ( かしゃ ) 拾壱ノ型　幻日虹 ( げんにちこう ) 拾弐ノ型　炎舞 ( えんぶ ) 拾参ノ型
月の呼吸 壱ノ型　闇月 ( やみづき ) ・宵 ( よい ) の宮 ( みや ) 弐ノ型　珠華 ( しゅか ) ノ弄月 ( ろうげつ ) 参ノ型　厭忌月 ( えんきづき ) ・銷 ( つが ) り 伍ノ型　月魄災禍 ( げっぱくさいか ) 陸ノ型　常世孤月 ( とこよこげつ ) ・無間 ( むけん ) 漆ノ型　厄鏡 ( やっきょう ) ・月映 ( づきば ) え 捌ノ型　月龍輪尾 ( げつりゅうりんび ) 玖ノ型　降 ( くだ ) り月 ( づき ) ・連面 ( れんめん ) 拾ノ型　穿面斬 ( せんめんざん ) ・蘿月 ( らげつ ) 拾肆ノ型　兇変 ( きょうへん ) ・天満繊月 ( てんまんせんげつ ) 拾陸ノ型　月虹 ( げっこう ) ・片割 ( かたわ ) れ月 ( づき )

まとめ

あれ？波紋の呼吸は？

特定のクラスを持つ要素だけを非表示→選択されたIDだけを表示、という風にしたいです。

この記事を書いた人

みやの

Web・DTP担当

We Blog Weblog