コーディング Kota Naito / 2018.01.12

セレクトボックスの値を変更すると、別のセレクトボックスの項目が自動で切り替わるjQuery【Dependent Selects】

Advertisement


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>の直前でも動作します。

HTML
<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要素を以下のように記述します。

HTML
<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階層でもつなげていくことも可能です。
また、今回のデモは、セレクトメニューを選択することで次のセレクトボックスが現れるようになっていますが、初めからすべてのセレクトボックスを表示しておくこともできます。
詳しくは、こちらのページに記載されているので、いろいろと試してみてください。

Advertisement

関連するおすすめ記事

kota naito

内藤 康太クリエイティブディレクター / フィット代表

2008年にWEBデザイナーとして独立し、フリーとして活動。その後、WEBディレクターとして一部上場企業とベンチャー企業で経験を積み、2016年から再びフリーのクリエイティブディレクターとして活動。 現在は、関東圏内で企業のWEBコンサルティング、WEB制作、コンテンツマーケティング支援、SEO対策を行っています。

WORKS

PRODUCTION RESULTS

CONTACT

ご相談・お見積り無料

お気軽にお問い合わせください。

消費者が求めているものを理解し、価値あるコンテンツを届けることが、今ホームページには求められています。他社に無い、御社ならではの強みを生かしたWEB戦略を提案いたします。

メールアイコン

個人事業主/中小企業にこそ必要な「選ばれる理由のある」ホームページを提案します。

“We propose a website that will be chosen by consumers for SMEs.”