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

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

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

フォームの使いやすさやデザイン性を向上させる33の方法

これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。

発展編

11. 連動するプルダウン

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

HTML


<li>項目1 :
<select id="commondityItem">
<option value="1">A</option>
<option value="2">B</option>
</select>
</li>
<li>項目2 :
<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つのセレクトまで連動させる事が可能です。2つ以上のセレクトを連動させる際には【jQuery Selectbox plugin】というプラグインが便利ですので使ってみるのも良いかと思います。

12. 連動するプルダウン(多数)【jQuery Selectbox plugin

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

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