EFO（入力フォーム最適化）は、コンテンツの内容やデザインに比べると、対策の優先順位が低くなりがちですが、入力フォームが最適化されれば、自然とユーザビリティが向上し、コンバージョン率の改善にも結びつきます。そのため、特に複雑なフォームを利用しているサイトでは軽視できない項目でもあります。
そこで今回は、EFOに大変役立つ、非常に便利なjQueryプラグイン【Dependent Selects】を紹介いたします。
Dependent Selectsとは
Dependent Selectsは、親となるセレクトボックスの値を変更すると、子であるセレクトボックスの項目が自動で切り替わるjQueryプラグインです。
デモを見ていただければその便利さをより体感していただけると思うので、まずは、動作デモをご覧ください。
DEMO
上の階層のメニューを選択することで、その下の階層にあるメニューの内容が自動的に切り替わった事がお分かりいただけたかと思います。
項目数が多すぎると選ぶのが面倒なセレクトボックスも、こうして親と子の関係を作ることで、使いやすくなります。
Dependent Selectsの使い方例
親子間自動切り換えセレクトボックスを利用するには、Dependent Selectsのgithubで入手できるjquery.dependent-selects.jsと、jQuery公式サイトから入手できるjquery.jsの2つのファイルが必要です。 両ファイルを手に入れたら、HTMLファイルに下記のように記述し、読み込みます。 ※下記のscriptの記述は、</body>の直前でも、</head>の直前でも動作します。
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="jquery.dependent-selects.js"></script>
<script type="text/javascript">
$(function(){
$('.dependent').dependentSelects({
placeholderOption: ['市区町村を選択', '地域を選択']
});
})
</script>
上記を記述したら、続いてselect要素を以下のように記述します。
<select name="location" class="dependent"> <option>都県を選択</option> <option value="tukizi">東京都 > 中央区 > 築地</option> <option value="ginza">東京都 > 中央区 > 銀座</option> <option value="odaiba">東京都 > 江東区 > お台場</option> <option value="toyosu">東京都 > 江東区 > 豊洲</option> <option value="roppongi">東京都 > 港区 > 六本木</option> <option value="tibasi">千葉県 > 千葉市</option> <option value="hunabasisi">千葉県 > 船橋市</option> <option value="kasiwasi">千葉県 > 柏市</option> <option value="saitamaken">埼玉県</option> </select>
これで、セレクトメニューの多いセレクトボックスも、ずっと使いやすく、またわかりやすくなり、ユーザーに優しいフォームパーツになるかと思います。
「>」がセパレーターの役割を果たしており、これで階層構造が作られていきます。この例では、第三階層までしか作っていませんが、4階層でも5階層でもつなげていくことも可能です。
また、今回のデモは、セレクトメニューを選択することで次のセレクトボックスが現れるようになっていますが、初めからすべてのセレクトボックスを表示しておくこともできます。
詳しくは、こちらのページに記載されているので、いろいろと試してみてください。
