【jQuery】セレクトボックスの中を画面いっぱいに表示・選択できるプラグインを作成

前回に、iOSのセレクトボックスが使いづらい問題についてまとめました。

iOSブラウザのセレクトボックスUIが使い辛すぎ問題
WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザー...

僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィールの送信では<select>を多用していたため、どうにかしたいと思っていました。

そのため、デバイス問わず、セレクトボックスをモーダル選択に置き換えるプラグイン「selmodal.js」を作成しました。

セレクトボックスを全画面表示するselmodal.js

jQueryと、該当のCSSとJSを読み込んで頂ければ動作します。(※モーダルの処理もCSSとJSに含まれています)

サンプルコード
<head>
<!-- プラグインのCSSを読み込む -->
<link href="css/selmodal.css" rel="stylesheet">
</head>

<div>通常のセレクト</div>
<select name="default">
    <option value="0">選択してください。</option>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
    <option value="4">選択肢4</option>
    <option value="5">選択肢5選択肢5選択肢5選択肢5選択肢5選択肢5選択肢5選択肢5選択肢5選択肢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>
</select>

<div>selmodal.jsのセレクト</div>
<select name="test" class="selmodaltest">
    <option value="0">選択してください。</option>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
    <option value="4">選択肢4</option>
    <option value="5">選択肢5選択肢5選択肢5選択肢5選択肢5選択肢5選択肢5選択肢5選択肢5選択肢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>
</select>

<!-- Jqueryを読み込む -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
<!-- プラグインのjsを読み込む -->
<script src="js/Jquery.selmodal.js"></script>
<script>
$(function(){
    //後者のセレクトをプラグインに適用
    $('.selmodaltest').selModal();
    //すべてのセレクトボックスに同じ処理する場合は下記のように書く
    //$('select').selModal();
});
</script>
実行結果
通常のセレクト

selmodal.jsのセレクト

このプラグインにより、iOSのセレクトボックスで問題となっていた点を下記のように改善しました。

・狭い表示エリアを拡大
・1タップで選択終了
・長い選択肢も折り返す

デフォルトで何かの値が入っている場合は、もちろんその値がボタンに表示されます。

サンプルコード
<select name="test" class="selmodaltest">
<option value="0">選択してください。</option>
<option value="1">野球</option>
<option value="2">サッカー</option>
<option value="3" selected="selected">バスケット</option>
<option value="4">ゴルフ</option>
<option value="5">テニス</option>
</select>
実行結果

また、option valueにdata-image属性を追加し、画像のURLを設定すると選択肢に画像を表示できます。

サンプルコード
<select name="test" class="selmodaltest">
<option value="0">選択してください。</option>
<option data-image="img/baseball.png" value="1">野球</option>
<option data-image="img/soccer.png" value="2">サッカー</option>
<option data-image="img/basket.png" value="3">バスケット</option>
<option data-image="img/golf.png" value="4">ゴルフ</option>
<option data-image="img/tennis.png" value="5">テニス</option>
</select>
実行結果

selmodal.jsの仕様

このプラグインを適用することで、指定した<select>ボックスが非表示(display:none;)になります。(なお、予め非表示でも問題ありません。)

そしてその要素の真下に、

「SELECT内のリストを格納したモーダル」

「モーダルを表示するボタン」

を生成します。

<select>は非表示になるだけで、submit等を行う際はしっかりモーダルで選択した値が送信されます。

生成される「モーダル」と「ボタン」は、選択肢を選ぶ処理を代行して行い、非表示の<select>に代入していると考えて頂ければ大丈夫です。

また、<select>とボタンとモーダルは、<select>で設定した「name=””」属性を参照し、代入しているので、「name=””」の設定と必須です。
そして、同じ「name」が複数存在しないよう、必ず一意になるよう設定してください。

選択時のイベント処理について

このモーダルで選択した場合は、通常の<select>で選択した時と異なり、

$(‘select’).change(function(){});のように、イベントの設定ができません。

選択した際のイベントは、下記のカスタムイベントを参照に設定を行ってください。

サンプルコード
<script>
$(function(){
    //[data-selmodal=""]には、設定したname属性を指定してください
    $('[data-selmodal="test"] li').on('selected', function(e){
        alert($(this).data('value'));
    });
});
</script>
実行結果

デモ動画

ダウンロードはこちらから

「selmodal.js」のダウンロードは下記のボタンから行えます。

ダウンロードはこちら

細かいデザインの調整などは付属のcssから変更をお願いします。

不具合などがありましたらコメントかメールで受け付けます。


ほぼiOSのセレクトボックス対策で作ったプラグインなので、PCやAndroidの場合は無理にこのプラグインを読み込む必要がないかもしれません。(画像を付けたいなどの事情がない限り)

とはいえ、iPhoneユーザーは多いので、こちらのプラグインがユーザビリティの向上に繋がれば嬉しいです。

以上、セレクトボックスの中を画面いっぱいに表示・選択できるプラグインを作成、でした。

コメント

タイトルとURLをコピーしました