ドロップダウンリスト変更時に、選択したマスタコードに紐づく情報を再描画せずに表示する。
何をしたいか
以下のようなドロップダウンリストを考える。
- 画面表示されている文言はマスタの名称
- Valueはマスタのコード値
- ドロップダウンリストを変えると、タグにマスタに保持されている値が表示される。
金利コードにリンクする金利をタグに表示させる。 例)コード値:A001, 名称:金利テスト001, 金利:1.5 など。
方法
やり方は幾つかある。
ドロップダウンリスト選択時にAjaxを使用し、サーバー側で名称を取得し、タグにバインドさせる。
予めサーバー側で名称を取得しておき、
Html側に、hiddenのドロップダウンリストを用意し、サーバー側で取得した金利をバインドする(valueに金利コード、textに金利)。金利コードのドロップダウンリストが変更されたら、hiddenのドロップダウンリストから、valueが等しいものを抽出し、そのtextをタグに反映させる。
1番目の方法は、いちいちDBとの通信が発生するため避けたい。 2番目の方法は、テンプレートエンジンで提供されるヘルパーメソッドを使用することができなくなる。
ここでは3番目のhiddenのドロップダウンリストを使用した方法を記載する。
- HTMLのソース
<!-- 金利コードドロップダウンリスト --> <select id="rate_code"> <option value="A001">金利テスト001</option> <option value="A002">金利テスト002</option> <option value="A003">金利テスト003</option> </select> <!-- 金利表枠 --> <span id="spanRate"></span> <!-- サーバー側でバインドした金利(hidden状態) --> <select id="rateDesc" class="hidden"> <option value="A001">1.5</option> <option value="A002">1.0</option> <option value="A003">1.3</option> </select>
- Javascriptコード
$(document).ready(function() { $("#custCode").on("change", function() { var $selected = $("#rateCode option:selected"); var $ddlDesc = $("#rateDesc"); var $spanDesc = $("#spanRate"); // 選択された金利コードと同値の、hiddenのドロップダウンリストのoptionを選択状態にする。 $ddlDesc.val($selected.val()); // 選択されているhiddenのtext(金利)を<span>タグに反映 $spanDesc.text($ddlDesc.children(':selected').text()); }); });
.hidden { display:none; }