このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.dependent-selects.js"></script>
<script>
	$(window).load(function(){
		$('.dependent-demo').dependentSelects({
			placeholderOption: '-- 選択してください --'
		}); 
	});
</script>
<select name="location" class="dependent-demo">
  <option>-- 選択してください --</option>
  <option value="238">London > North > Enfield</option>
  <option value="239">London > North > Barnet</option>
  <option value="240">London > South > Croydon</option>
  <option value="241">London > South > Bromley</option>
  <option value="242">London > South > Sutton</option>
  <option value="243">Bristol > St Pauls</option>
  <option value="244">Bristol > Horfield</option>
  <option value="245">Bristol > Bedminster</option>
  <option value="246">Bournemouth</option>
</select>
<input type="submit" value="送信">

DependentSelectsについて

DependentSelectsは、セレクトボックスの選択に応じて、次のセレクトボックスの内容を動的に変更することができるプラグインです。
HTMLタグの記述が若干手間ではありますが、ユーザービリティーのあるフォームを作ることができそうです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • DropKick

    DropKick

    セレクトボックスの見た目をリッチに

  • Picker

    Picker

    ラジオボタンやチェックボックスのスタイルをクールにしてくれる

  • Placeholders

    Placeholders

    IE6-9でplaceholderと同じ機能を実現する

  • CharacterCount

    CharacterCount

    入力フォームに文字数制限を設定し、入力可能文字数をリアルタイムで表示する

  • pickadate

    pickadate

    入力フォームに日付や時間をピッカーから選択できるUIを簡単に設置できる