じぶんメモ

プログラミングのメモ、日常のメモとか。

ドロップダウンリスト変更時に、選択したマスタコードに紐づく情報を再描画せずに表示する。

何をしたいか

以下のようなドロップダウンリストを考える。

  • 画面表示されている文言はマスタの名称
  • 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>
$(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;
}