jQuery 選択値で連動するプルダウンを実装してフォームの使いやすさを向上させる方法

どうもこんばんは。Toshikuraです。前回から引き続き、フォーム関連の連続記事です。前回から少し発展してjQueryを使っています。
今回は【jQuery 選択値で連動するプルダウンを実装してフォームの使いやすさを向上させる方法】です。

発展編

11. 連動するプルダウン

　
プルダウンを選択によって次の選択肢が絞られていくという仕様を実装する際にtomomosanさんの素敵な記事を参照します。使い勝手が良いので機会があればお試しください。

HTML

<li>項目１　：
<select id="commondityItem">
<option value="1">A</option>
<option value="2">B</option>
</select>
</li>
<li>項目２　：
<select id="makerItem">
<option value="1">A1</option>
<option value="2">A2</option>
</select>
</li>

JS

$.fn.pulldownChange = function(targetid, changeid, changeItemArray){
    $("#" + targetid).change(function(){
		value = $(this).val();
		$("#" + changeid).children().remove();
		changePulldown = changeItemArray[value];
		changeSellectNode = window.document.getElementById(changeid);
		for (var i = 0; i < changePulldown.length; i++ ) {
			changeSellectNode.options[i] = new Option(changePulldown[i][1], changePulldown[i][0]);
		}
		changeSellectNode.selectedIndex = 0;
	});
}
var makerArray = {
	"1":[["1","A"],["2","B"]],
	"2":[["1","B1"],["2","B2"],["3","B3"],["4","B4"]]
};
$(function () {
	$("body").pulldownChange("commondityItem", "makerItem", makerArray);
});

この方法ですと２つのセレクトまで連動させる事が可能です。2つ以上のセレクトを連動させる際には【jQuery Selectbox plugin】というプラグインが便利ですので使ってみるのも良いかと思います。

12. 連動するプルダウン（多数）【jQuery Selectbox plugin】

連動のタイミング（イベント）から連動の方法（非選択 – 削除）まで細かく設定できますので詳しくはjQuery Selectbox pluginをご確認ください。

今回は以上になります。デモではtipsの内容を適応した例が確認できますので、もしよろしければ合わせてご確認ください。