ここでは、HTML の ochange 属性を ASP.NET から登録して Javascrit 関数を呼び出すサンプルコードを掲載しています。
スポンサーリンク
Synchronized DropDownList
呼び出す Javascript は本来であれば簡単なほうが良いとは思いますが、2つのドロップダウンリストを同期させる Javascript 関数をサンプルとして使用します。2つの SELECT タグの id 属性を引数に持ちます。ここでは本題と外れますが、詳細はコメントを参照ください。
サンプルとして使用するには無駄に大作な関数になりました。
// ドロップダウンリスト同期関数 function sync_dropdown_list(src, dst) { // 同期用ドロップダウンリスト(HTML/selectタグ)の要素を取得 var src_element = document.getElementById(src); var dst_element = document.getElementById(dst); // ============================================= // 1.valueを元に同期させる場合 // (順不同で項目が並んでいる場合にも使用可能) // ============================================= // 同期元の値を取得する var value = src_element.options[src_element.selectedIndex].value; // 同期先の同一値の項目を選択状態にする var flag = false; for (var i=0; i<dst_element.options.length; i++) { var option = dst_element.options[i]; // value が一致していれば選択状態にする if (option.value == value) { // 同一値が2つ以上存在する場合は、最初に見つかった項目のみを // 選択状態にするための措置 // 同一値が存在しない場合が明確な場合は、対応不要 if (flag) { option.selected = false; } else { option.selected = true; flag = true; } } else { option.selected = false; } } //// ============================================= //// 2.インデックスを元に同期させる場合 //// (同一順序で項目が並んでいる場合に使用可能) //// ============================================= //// 同期先のドロップダウンリストのインデックスを変更する //var index = src_element.selectedIndex; //dst_element.selectedIndex = index; }
onchange 属性の登録
ドロップダウンリスト ( SELECT ) の選択項目が変更された場合に呼び出される onchange 属性を登録します。onchange 属性には前述の Javascript を呼び出すようにしています。ポイントは、Dropdownlist.ClientID をパラメータとして渡していることです。Dropdownlist.ID ではありません。
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim syncScript As String ' Dropdownlist1 の変更をDropdownlist2 に反映させるスクリプトの呼び出し設定 ' sync_dropdown_list 関数(Javascript)は、ASPX ファイルに定義されている syncScript = "sync_dropdown_list('" + Dropdownlist1.ClientID + "','" + Dropdownlist2.ClientID + "')" Dropdownlist1.Attributes.Add("onchang", syncScript) ' Dropdownlist2 の変更をDropdownlist1 に反映させるスクリプトの呼び出し設定 syncScript = "sync_dropdown_list('" + Dropdownlist2.ClientID + "','" + Dropdownlist1.ClientID + "')" Dropdownlist2.Attributes.Add("onchange", syncScript) End Sub
C#
protected void Page_Load(object sender, EventArgs e) { string syncScript; // Dropdownlist1 の変更をDropdownlist2 に反映させる syncScript = "sync_dropdown_list('" + Dropdownlist1.ClientID + "','" + Dropdownlist2.ClientID + "')"; Dropdownlist1.Attributes.Add("onchange", syncScript); // Dropdownlist2 の変更をDropdownlist1 に反映させる syncScript = "sync_dropdown_list('" + Dropdownlist2.ClientID + "','" + Dropdownlist1.ClientID + "')"; Dropdownlist2.Attributes.Add("onchange", syncScript); }