4.2.2.7. ドロップダウンリストの選択肢の作成方法と動的変更¶
4.2.2.7.1. リストデータ（選択肢）の作成¶
KAIDEN.base.foundation.SelectListData.storeListを利用することで、リストデータを作成します。第一引数が、リストデータ名、第二引数はリストデータ。// リストデータの作成 jQuert(function($) { KAIDEN.base.foundation.SelectListData.storeList("listName" , [{key:"key1", value:"value1", deleteFlag:"false"} , {key:"key2", value:"value2", deleteFlag:"false"} , {key:"key3", value:"value3", deleteFlag:"true"}]); });コラム
第一引数のリストデータ名は、HTMLページ全体で一意な名称で扱われます。
4.2.2.7.2. ドロップダウンリスト（<k:select />）との連携¶
上記で作成した、リストデータとドロップダウンリストを連携させることで、ドロップダウンリストの子要素として<option>が生成されます。<%-- ドロップダウンリストの作成 --%> <k:select name="list" mode="0" dataName="listName" />リストデータとの連携で以下のようなHTMLが生成されます。<select name="list"> <option value="key1">value1</option> <option value="key2">value2</option> </select>選択肢中のdeleteFlagが”true”の場合は、<option>は生成されません。強制的に生成させるためには、<k:select>の属性にincludeDisabled=”true”を付与します。コラム
<k:select name=”list” mode=”1” dataName=”listName” /> のように、mode=”1”としてselectをラベルで出力した際に、Accessを利用してsetValue(“コード値”)すると、deleteFlagの有無を無視して、選択肢を表示します。
4.2.2.7.3. 選択肢の動的変更¶
選択肢の動的変更は、選択肢の作成と同様に、KAIDEN.base.foundation.SelectListData.storeListを利用します。
// リストデータの作成 jQuert(function($) { KAIDEN.base.foundation.SelectListData.storeList("listName" , [{key:"key1", value:"値1", deleteFlag:"false"} , {key:"key2", value:"値2", deleteFlag:"false"} , {key:"key3", value:"値3", deleteFlag:"true"}]); });第一引数のリストデータ名を同じ名前で再定義することで、関連づいている<select>すべての<option>値が新しく書き換わります。
コラム
選択肢（<option>)が動的に変更された後、すでに選択済みのコードが変更後の選択肢にもあれば復元（選択状態）します。もし選択済みのコードが変更後の選択肢になければ、valueが空文字の<option>が選択されるか、存在しなければselectedIndex = -1が設定されます。
4.2.2.7.4. ajax通信を利用した選択肢の動的変更¶
KAIDEN.base.foundation.SelectListData.storeListには、ajax通信を利用した選択肢の動的変更の仕組みも用意されています。// リストデータの作成 jQuert(function($) { KAIDEN.base.foundation.SelectListData.storeList("listName" , [{key:"key1", value:"値1", deleteFlag:"false"} , {key:"key2", value:"値2", deleteFlag:"false"} , {key:"key3", value:"値3", deleteFlag:"true"}] , "ajaxURL" , {companyCd:"comp_sample_01"}); }); // リストデータのリフレッシュ KAIDEN.base.foundation.SelectListData.refreshList("listName", {criteriaData:"2013/01/01"});refreshList()すると、追加条件（{criteriaData:”2013/01/01”}）を付与してajax通信を行い、その戻り値に応じて<select>の<option>を変更します。コラム
ajax通信の戻り値は、JSON形式のリストデータを返却するようにしてください。コラム
storeList()時点でURLを指定しますが、この時点では通信は行われません。
4.2.2.7.5. タグリブで定義済みのリストデータの利用¶
会社などのリストデータはあらかじめタグリブにて定義済みです。以下のように利用します。<%@ taglib prefix="k" uri="http://kaiden.slcs.co.jp/taglib/ui" %> <%@ taglib prefix="klist_base" uri="http://kaiden.slcs.co.jp/taglib/listdata/base" %> <klist_base:listDataCompany name="readParmitCompany" type="readParmitCompany" /> <k:select name="companyCd" mode="0" dataName="readParmitCompany"/>リストデータタグについては詳しくは 基本的なエレメント を参照してください。