htmlのセレクトボックスについてお聞きしたいです。

Question

みなさんこんばんわ。
プログラミング初心者のものです。
よろしくお願いいたします。

セレクトボックスについてお聞きしたいです。

###ソースコード

<span class="search_item">
    <select name="select" onChange="location.href=value;" class="select_genre">
        <option>ジャンル検索</option>
        <option value="/top/genre/aaa">AAA</option>
        <option value="/top/genre/bbb">BBB</option>
        <option value="/top/genre/ccc">CCC</option>
        <option value="/top/genre/ddd">DDD</option>
        <option value="/top/genre/eee">EEE</option>
    </select>
</span>

以上のhtmlの場合で、セレクトボックスのジャンルを選んだ際、それぞれ遷移した画面でそれぞれのジャンル名がセレクトボックス内に表示されるようにするには、どうしたらよいのでしょうか？

例えば、[AAA]を選んで/top/genre/aaaのページに飛んだ際は、セレクトボックスの中の表示は[AAA]に、
[BBB]を選んで/top/genre/bbbのページに飛んだ際は、セレクトボックスの中の表示は[BBB]に、
といった具合です。

CSSのみでできるのでしょうか？
わかる方教えていただけたら嬉しいです。
よろしくお願いいたします。

もし情報が足らないなどの場合は、コメント欄にコメントをいただけたら幸いです。

Answer 1

こんばんは。
全てのページをhtmlファイルで構成されていらっしゃるのでしたら、

・[AAA]を選んで/top/genre/aaaのページに飛んだ際

    <select name="select" onChange="location.href=value;" class="select_genre">
        <option>ジャンル検索</option>
        <option value="/top/genre/aaa" selected>AAA</option>
        <option value="/top/genre/bbb">BBB</option>
        <option value="/top/genre/ccc">CCC</option>
        <option value="/top/genre/ddd">DDD</option>
        <option value="/top/genre/eee">EEE</option>
    </select>

というように、該当のoptionタグに"selected" 属性を記述してあげれば、「選択された状態」になり、セレクトボックスにあらかじめ表示された状態になります。

Comments

[y_43]

akira888さん
回答していただきどうもありがとうございます。

なるほど、そういうやり方があるんですね。
今後の参考にさせていただきます！
どうもありがとうございました！
また今後ともよろしくお願いいたします！

Answer 2

selectedを付与すれば選択した状態になります。

<option value="/top/genre/aaa" selected>AAA</option>

CSSのみで実現するのは厳しいと思うのでJavascriptでHTMLをいじることになると思います。
(見た目のみ選択されている風でいいのであればCSSのみでいけると思います)

Javascriptでやるならば、遷移先のURLとoptionのvalueを比べて一致したものにselectedを付与するみたいな感じになるかと。

Comments

[y_43]

rossi46hiroさん
回答していただきどうもありがとうございます。

これを参考に、解決することができました！
どうもありがとうございました！
また今後ともなにかありましたらよろしくお願いいたします。