既存のselectタグの挙動に困っている方必見！プルダウンをulタグで作成してみよう！

プログラミング

2020.05.12 2020.04.18

こんにちは。ぬぁるです。

今回は、selectタグで作成するプルダウン（ドロップダウン）メニューを、
リスト（ul）で作成する方法をご紹介します。

はじめに

入力フォームなどで、ユーザーに複数ある選択肢の中から選択して欲しい場合、様々な方法があります。
チェックボックスを複数用意したり、ラジオボタンで表現することもできるでしょう。

プルダウン（ドロップダウン）メニューとして用意することも可能です。
この場合、selectタグを利用するのが簡単ですが、一方でブラウザ毎にデザインが異なり、
またデフォルトの挙動に悩まされることもあります。

そういったときには、ulタグでプルダウンメニューを作ることを検討してみましょう。
本来、箇条書きをhtmlで表現する際に利用することが多いulタグですが、
書き方を工夫すればプルダウンメニューのような形を作ることもでき、
さらにselectタグよりも柔軟な実装が可能になります！

作り方

まず、完成イメージをお見せします。

こんな動作になるように、以下順番に説明していきます。

入れ子のリストを作成する

まず、以下のように、ulが入れ子になっているリストを作成しましょう。

  <ul>
    <li><p>選択された値が入る箇所</p>
      <ul>
        <li>テスト項目1</li>
        <li>テスト項目2</li>
        <li>テスト項目3</li>
      </ul>
    </li>
  </ul>

見た目は以下のようになります。

2つのulにスタイルを指定

次に、2つのulに以下のスタイルを指定します。

style="list-style: none; padding: 0;"

見た目は次のようになります。

枠線をつける

プルダウンっぽくするために、枠線をつけましょう。
以下のように、また2つのulにborder（border-top）プロパティを設定しています。

  <ul style="list-style: none; padding: 0; border: solid 1px grey;">
    <li><p>選択された値が入る箇所</p>
      <ul style="list-style: none; padding: 0; border-top: solid 1px grey;">
        <li>テスト項目1</li>
        <li>テスト項目2</li>
        <li>テスト項目3</li>
      </ul>
    </li>
  </ul>

見た目は次のようになります。

幅とマージンを整える

pタグのmarginを調整し、外側のulのwidthを指定して整えます。
見た目は次のような感じです。

プルダウンメニューを開閉させる

今回はjQueryをCDNで読み込んで、clickイベントでプルダウンメニューを開閉させてみます。
※display: noneで初期状態でプルダウンメニューは閉じておきましょう。

要素にidを振って、、、

  <ul id="pulldown_menu" style="list-style: none; padding: 0; border: solid 1px grey; width: 250px;">
    <li><p style="margin: 0;">選択された値が入る箇所</p>
      <ul id="pulldown_list" style="list-style: none; padding: 0; border-top: solid 1px grey; display: none;">
        <li>テスト項目1</li>
        <li>テスト項目2</li>
        <li>テスト項目3</li>
      </ul>
    </li>
  </ul>

以下のscriptタグをheadタグ内に記述し、jQueryを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

そしてscriptを書きます。

    $(function(){
      $("#pulldown_menu").click(function(){
        if ($("#pulldown_list").css("display").indexOf("none") != -1) {
          $("#pulldown_list").css("display", "block");
        } else {
          $("#pulldown_list").css("display", "none");
        }
      })
    });

こんな感じ。

すると、冒頭お見せしたイメージのような動作が可能になります。
後は、CSSでデザインを綺麗にして、インラインで書いているのをまとめたらきっといい感じになるでしょう。
↓のように▼とか付けるとそれっぽくなります。