 |
ASP.NET シンクロナイズド ドロップダウンリスト for Javascript
シンクロナイズド ドロップダウンリスト（Synchronized Dropdownlist）for Javascript と仰々しく名づけてあるが、単純にドロップダウンの選択項目を Javascript で変更する Tisp である。
※ asp.net ともあまり関係ない
Javascript で２つのドロップダウンリストを同期させる
ドロップダウンリストを２つ使用して、一方の選択項目が変更した場合にもう一方のドロップダウンリストも選択項目を Javascript を使って変更する方法を説明する。
まずは、ASPX ファイルの定義を示す。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無題のページ</title>
<script type="text/javascript">
<!--
// ドロップダウンリスト同期関数
function sync_dropdown_list(src, dst) {
// 同期用ドロップダウンリスト(HTML/selectタグ)の要素を取得
var src_element = document.getElementById(src);
var dst_element = document.getElementById(dst);
// =============================================
// １．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;
}
}
//// =============================================
//// ２．インデックスを元に同期させる場合
//// (同一順序で項目が並んでいる場合に使用可能)
//// =============================================
//// 同期先のドロップダウンリストのインデックスを変更する
//var index = src_element.selectedIndex;
//dst_element.selectedIndex = index;
}
// -->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:dropdownlist ID="Dropdownlist1" runat="server">
<asp:ListItem Value="val1" Text="text1"></asp:ListItem>
<asp:ListItem Value="val2" Text="text2"></asp:ListItem>
<asp:ListItem Value="val3" Text="text3"></asp:ListItem>
<asp:ListItem Value="val4" Text="text4"></asp:ListItem>
</asp:dropdownlist>
<asp:dropdownlist ID="Dropdownlist2" runat="server">
<asp:ListItem Value="val1" Text="text1"></asp:ListItem>
<asp:ListItem Value="val2" Text="text2"></asp:ListItem>
<asp:ListItem Value="val3" Text="text3"></asp:ListItem>
<asp:ListItem Value="val4" Text="text4"></asp:ListItem>
</asp:dropdownlist>
</div>
</form>
</body>
</html>
同期用に、同じ4つの項目を持つドロップダウンリストを２つ配置し、ドロップダウンリストの選択項目が変更された場合に呼び出される Javascript 関数を定義している。なお、２通りの同期方法を挙げているので簡単に説明する。
※詳細は、上記コード中のコメントを参照のこと
１．選択された項目の value を元に同期させる方法
同期元ドロップダウンリストと同期先ドロップダウンリストの項目が順不同で並んでいる場合はvalue 値を元に同期させることができる。しかし、同一の value 値を複数持っている場合は、同期元と同期先のドロップダウンリストの選択状態に不一致が起こる。（同一の value 値を持つ項目の先頭以外の項目を選択した場合）
２．選択された項目のインデックスを元に同期させる場合
同期元ドロップダウンリストと同期先ドロップダウンリストの項目が同一順序で並んでいることが明確な場合はselectedIndex を元に同期させることができる。この方法では、リスト内に、同一の value を持つ項目が複数存在しても、正常に同期させることができる。
onchange イベントハンドラの登録
ドロップダウンリストの選択項目が変更された場合に、上記で示した Javascript 関数を呼び出すための登録処理を示す。
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
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);
}
ここでは、ドロップダウンリストの選択項目が変更された場合に、Javascript で記述した関数（ASPX に定義）を呼び出すようにonchange イベントハンドラを登録している。注意点としては、Javascript はブラウザで実行されるためブラウザで認識可能な ID として、Dropdownlist.ClientID をパラメーターとして渡している点である。