JavaScriptでカスタムセレクトボックスを実装｜スマホ対応の汎用ピッカー「mamGeneralPicker.js」

HTMLの<select>タグでは満足できない場面、特にスマートフォンでの操作性やカスタマイズ性を求める方におすすめなのが「mamGeneralPicker.js」です。
任意のリストを指定するだけで、軽量かつ柔軟なセレクトUIを簡単に実装可能。時間選択やカテゴリ選択など、さまざまな用途に対応できる汎用ピッカーです。

■使い方

mamgeneralpicker.js(14KB)ダウンロード
上記ボタンを押してmamgeneralpicker.jsをダウンロードします。
mamGeneralPickerを使いたいファイルで、
```
  <script src="./js/mamgeneralpicker.js"></script>
```
のように、相対又は絶対パスでmamgeneralpicker.jsを指定します。
クラス名に"mamGeneralPicker"を指定したinputエレメント(type="text")を設定します。
```
  <input type="text" class="mamGeneralPicker" data-list="雑誌,漫画,辞書,辞典" />
```
ブラウザで開いてテキストボックスをクリックしたりタップすると汎用ピッカーが開きます。

■使用例

選択１:

<script src="./js/mamGeneralPicker.js"></script>
<input type="text" class="mamGeneralPicker" data-list="Delphi,VisualBasic,Python,Javascript,VBA"/>

選択２:

<script src="./js/mamGeneralPicker.js"></script>
<input type="text" class="mamGeneralPicker" data-list="単行本,パンフレット,雑誌,漫画,カタログ,専門書,辞書,百科事典"/>

時: 分:

<script src="./js/mamGeneralPicker.js"></script>
<input type="text" class="mamGeneralPicker" placeholder="時" data-list="00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23"/>
<input type="text" class="mamGeneralPicker" placeholder="分" data-list="00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59"/>

スマートフォンなどで、オンスクリーンキーボード（ソフトウェアキーボード）を表示したくない場合は、readonly 属性を追加してください。

<input type="text" class="mamGeneralPicker" placeholder="時" data-list="00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23" readonly="readonly" />