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

Web

2022年12月15日

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

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

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

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

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

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

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

なにジョジョ？

ジョジョはもう知ってるよって？

じゃあ呼吸法について学んでくるんだ

<div class="select4">
  <select id="select4" class="sl4" required>
    <option value="" selected hidden disabled></option>
    <option value="jojo1">ジョナサン・ジョースター</option>
    <option value="jojo2">ジョセフ・ジョースター</option>
    <option value="jojo3">空条承太郎</option>
    <option value="jojo4">東方仗助</option>
    <option value="giogio5">ジョルノ・ジョバァーナ</option>
    <option value="jojo6">空条徐倫</option>
    <option value="jojo7">ジョニィ・ジョースター</option>
    <option value="jojo8">東方定助</option>
    <option value="jojo9">ジョディオ・ジョースター</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="jojo1">ファントムブラッド</dt>
  <dt id="jojo2">戦闘潮流</dt>
  ・
  ・
  ・
  <dt id="jojo9">The JOJOLands</dt>
</dl>

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

<dl>
  <dt id="jojo0" style="visibility: hidden">ダミー</dt>		  
  <dt id="jojo1">ファントムブラッド</dt>
  <dt id="jojo2">戦闘潮流</dt>
  ・
  ・
  ・
  <dt id="jojo9">The JOJOLands</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だけを表示、というしくみだそうです。勉強になりました。

選択してください

Part1「ファントムブラッド」Phantom Blood 舞台は1888年のイギリス。 英国の青年貴族で強い正義感と勇気を持つ主人公ジョナサン・ジョースターと、下層階級の出身ながら類稀なカリスマ性と野望の持ち主ディオ・ブランドーの抗争劇。 「石仮面」や「波紋」を背景に、2人の成長や対立が描かれている。
Part1「ファントムブラッド」Phantom Blood 舞台は1888年のイギリス。 英国の青年貴族で強い正義感と勇気を持つ主人公ジョナサン・ジョースターと、下層階級の出身ながら類稀なカリスマ性と野望の持ち主ディオ・ブランドーの抗争劇。 「石仮面」や「波紋」を背景に、2人の成長や対立が描かれている。
Part2「戦闘潮流」Battle Tendency 舞台は1938年のアメリカ。 再び世界大戦の足音が聞こえ始めた中で、ジョナサンの孫のジョセフ・ジョースターもジョナサンと同じく「波紋」を身に付けていた。そんな中、人類を遥かに凌駕する知的生物「柱の男」たちが発掘される。 人類の脅威となりうる「柱の男」を倒すため、ジョセフたちは各地を奔走する。
Part3「スターダストクルセイダース」Stardust Crusaders 舞台は1988年。 100年の時を経て、ジョナサンの肉体を乗っ取ったDIO（ディオ）が復活した。それと共鳴するかのようにジョセフの孫の空条承太郎に、幽波紋（スタンド）という能力が発現する。 DIOの影響によって危篤に陥った母の空条ホリィを救うため、承太郎はジョセフらと共にDIOの潜むエジプトを目指す。
Part4「ダイヤモンドは砕けない」Diamond is Unbreakable 舞台は1999年の日本。 ジョセフの隠し子の東方仗助の住むS市杜王町では、スタンド使いが増え続けていた。そんな中、仗助の祖父はその内の一人であるスタンド使いの犠牲となり、帰らぬ人となる。 意志を継いで杜王町を守るため、仗助と仲間たちは町に潜むスタンド使いと闘いを繰り広げていく。
Parte5「黄金の風」Golden Wind 舞台は2001年のイタリア。 DIOの息子のジョルノ・ジョバァーナ（汐華初流乃）は、街を浄化するギャングスターになるため、ギャング組織「パッショーネ」に入団する。 ボスを倒し、組織を乗っとるという野望を果たすべく、ジョルノたちは内部抗争が起こる組織でボスとの接触に挑む。
Part6「ストーンオーシャン」Stone Ocean 舞台は2011年のアメリカ。 承太郎の娘の空条徐倫は、罠にはめられて刑務所へ収監される。承太郎は救出にやって来たが、刑務所内にいた謎の敵による襲撃から徐倫をかばい仮死状態に陥ってしまう。 徐倫は父を救うべく、来襲するスタンド使いたちを退けつつ、この悪夢を仕掛けた黒幕との戦いに身を投じる。
Part7「スティール・ボール・ラン」STEEL BALL RUN 舞台は1890年のアメリカ・サンディエゴビーチ。 この地で世紀の大レースが開催される。謎の鉄球を操る男のジャイロ・ツェペリと、下半身不随の元騎手のジョニィ・ジョースターは、それぞれの目的のためにゴールのニューヨークを目指す。しかしレースの裏側では、国家が秘密裏に「聖人の遺体」を集めていた。
Part8「ジョジョリオン」JoJolion 舞台は2011年の日本・S市杜王町。 スティール・ボール・ラン・レースから120年後。大震災を機に隆起した断層「壁の目」で、広瀬康穂は記憶を失った謎の青年を発見する。その青年は、街でフルーツパーラーを経営する名家・東方家に引き取られ、「東方定助」と名付けられる。 定助は、謎の果実「ロカカカ」やそれを巡る謎の種族・岩人間たちとの戦いを通し、過去の自分を探していく。
Part9「The JOJOLands」 舞台はハワイ・オアフ島。大富豪になるという野望を達成するべく、この世の仕組み（メカニズム）の頂点に立つことを目的とする少年ジョディオ・ジョースターを描く。

まとめ

ジョジョ立ちのフリー素材ってあるんだ...

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

この記事を書いた人

みやの

Web・DTP担当

We Blog Weblog