[ ASP.NET ] onchange 属性を追加して Javascript 関数を呼び出す ( Dropdownlist.Attributes.Add )

Tweet

Pocket

ここでは、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);

    // =============================================
    // １．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;
}

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);
}

Tweet

Pocket