簡単設置のダイアログ形式セレクトボックスのデザイン～ mamselect.js

Javascriptでセレクト(select)タグを非表示にして選択ボタンとダイアログ形式の選択ボックスを表示します。
iOS(iPhoneのsafari)でセレクト(select)タグを使用するとドラムロール式で使いにくいそうです。本スクリプトを使うとWindowsでもMacでもAndroidでもiPhoneでも同じ操作性にすることが出来ます。

mamselect.js(7KB)ダウンロード

■使い方

上記ボタンを押してmamselect.jsをダウンロードします。
mam selectを使いたいファイルで、
```
  <script src="./js/mamselect.js"></script>
```
のように、相対又は絶対パスでmamselect.jsを指定します。

クラス名に"mamselect"を指定したselectエレメントを設定します。また、スタイルシートでフォントサイズも指定してください。

  <select class="mamselect" style="font-size:24px;">
    <option value="0">選択してください</option>
    <option value="1">Javascript</option>
    <option value="2">HTML</option>
    <option value="2">CSS</option>
  </select>

ブラウザで開いてテキストボックスをクリックしたりタップするとセレクトダイアログが開きます。

■使用例

  <select class="mamselect" style="font-size:24px;">
    <option value="0">選択してください</option>
    <option value="1">Javascript</option>
    <option value="2">HTML</option>
    <option value="2">CSS</option>
  </select>

■使用例（文字列が長い例）

  <select class="mamselect" style="font-size:24px;">
    <option value="0">選択肢から選んでください</option>
    <option value="1">選択肢１（選択肢の文字列が長い場合はダイアログボックス内で改行されて表示します）</option>
    <option value="2" selected>選択肢２（選択されたセレクト オプションは、ダイアログボックス内では左にチェックボックスが表示されます）</option>
    <option value="3">選択肢３</option>
    <option value="4">選択肢４</option>
    <option value="5">選択肢５</option>
    <option value="6">選択肢６</option>
    <option value="7">選択肢７</option>
    <option value="8">選択肢８</option>
    <option value="9">選択肢９</option>
    <option value="10">選択肢１０</option>
    <option value="11">選択肢１１</option>
    <option value="12">選択肢１２</option>
    <option value="13">選択肢１３</option>
    <option value="14">選択肢１４</option>
    <option value="15">選択肢１５</option>
    <option value="16">選択肢１６</option>
    <option value="17">選択肢１７</option>
    <option value="18">選択肢１８</option>
    <option value="19">選択肢１９</option>
  </select>