トップへ(mam-mam.net/)

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

検索:

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

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

■使い方

■使用例

  <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">選択肢1(選択肢の文字列が長い場合はダイアログボックス内で改行されて表示します)</option>
    <option value="2" selected>選択肢2(選択されたセレクト オプションは、ダイアログボックス内では左にチェックボックスが表示されます)</option>
    <option value="3">選択肢3</option>
    <option value="4">選択肢4</option>
    <option value="5">選択肢5</option>
    <option value="6">選択肢6</option>
    <option value="7">選択肢7</option>
    <option value="8">選択肢8</option>
    <option value="9">選択肢9</option>
    <option value="10">選択肢10</option>
    <option value="11">選択肢11</option>
    <option value="12">選択肢12</option>
    <option value="13">選択肢13</option>
    <option value="14">選択肢14</option>
    <option value="15">選択肢15</option>
    <option value="16">選択肢16</option>
    <option value="17">選択肢17</option>
    <option value="18">選択肢18</option>
    <option value="19">選択肢19</option>
  </select>