質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

ASP.NETにて実装したDropDownListのSelectedIndexChangedイベントを発生させたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 12K+

yamakawa03

score 19

前提・実現したいこと

ASP.NETにて実装したDropDownListのSelectedIndexChangedイベントを発生させたい。
DropDownListはjavascriptで動的に作成しているためなのか、SelectedIndexChangedイベントが発生しません。

SelectedIndexChangedイベントを発生させることは可能でしょうか?

該当のソースコード

↓コントロールの定義

<asp:DropDownList runat="server" ID="SelectList" CssClass="select-ui" AutoPostBack="true"></asp:DropDownList>

↓ドロップダウンリストは動的に作成

          $("#SelectList").empty();
          $.each(response.d, function (index, val) {
            $("#SelectList").append(
              "<option value='" + val.Code + "'>" + val.Name + "</option>"
            );
          });
          $("#SelectList").selectmenu("refresh");

↓このイベントが発生しない。

    Private Sub SelectList_SelectedIndexChanged(sender As Object, e As EventArgs) Handles SelectList.SelectedIndexChanged
        'ここにイベント発生時の処理を記述
    End Sub

試したこと

ドロップダウンリストを動的に作成しない場合はSelectedIndexChangedイベントは発生する。

補足情報(言語/FW/ツール等のバージョンなど)

ドロップダウンは「jquery-ui-1.12.1.min.js」を使用

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

SelectedIndexChangedイベントを発生させることは可能でしょうか? 

サーバーコントロールではない、単なる html 要素では不可能です。

ASP.NET Web Forms アプリで、本来ステートレスな Web アプリが Windows Forms アプリのようにイベントドリブンになるのは、(1) サーバーコントロール、(2) ビューステート、(3) ポストバックの 3 つがあってこそです。

今回のケースでは (1) も (2) もないので何ともなりません。

DropDownList サーバーコントロールを使うか、それがダメならサーバー側でのイベントに頼らない全く別の手段を考えるほかないと思います。

** 2017/5/5 17:40 追記 **

2017/05/05 17:27 の私のコメントで「後で具体例を回答欄に書いておきます」と書きましたが、それを以下に追記します。

DB から取得するデータを DropDownList に表示するということで、SqlDataSource コントロールと併用します。DB は Microsoft の Northwind サンプルデータベースの Categories テーブルと Products テーブルを例に使い、1 つめの DropDownList にカテゴリーを表示し、その選択を変えると自動的に 2 つめの DropDownList に選んだカテゴリーに属する商品一覧を表示するようにしています。

Visual Studio のウィザードを利用して、イベントハンドラの中身以外は一切コードを書かずに実装しています。

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

    protected void ProductDripdown_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label2.Text = "Selected Value: " + ((DropDownList)sender).SelectedValue;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" 
            runat="server" 
            ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" 
            SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
        </asp:SqlDataSource>

        <asp:DropDownList ID="categoryDropdown" 
            runat="server" 
            AutoPostBack="True" 
            DataSourceID="SqlDataSource1" 
            DataTextField="CategoryName" 
            DataValueField="CategoryID">
        </asp:DropDownList>

        <br />

        <asp:SqlDataSource ID="SqlDataSource2" 
            runat="server" 
            ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" 
            SelectCommand="SELECT [ProductID], [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
            <SelectParameters>
                <asp:ControlParameter ControlID="categoryDropdown" 
                    Name="CategoryID" 
                    PropertyName="SelectedValue" 
                    Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>

        <asp:DropDownList ID="ProductDripdown" 
            runat="server" 
            AutoPostBack="True" 
            DataSourceID="SqlDataSource2" 
            DataTextField="ProductName" 
            DataValueField="ProductID" 
            OnSelectedIndexChanged="ProductDripdown_SelectedIndexChanged">
        </asp:DropDownList>

        <br />
        <asp:Label ID="Label2" runat="server"></asp:Label>
    </form>
</body>
</html>

見慣れないかもしれませんが、上記は Web サイトプロジェクトでコードは分離していません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/05 17:00 編集

    動的に作成したDropDownListにjQuery-UIのSelectmenuを適用するとSelectedIndexChanged イベントが発生しないという問題は残りましたが、本題とは関係ないので、解決とさせて頂きます。

    キャンセル

  • 2017/05/05 17:27

    解決したとのことですので今さらながらですが・・・

    コードを拝見すると DB から取得するデータを DropDownList に表示するようですが、であれば SqlDataSource などのデーターソースコントロールと併用するのがよさそうです。

    後で具体例を回答欄に書いておきます。

    キャンセル

  • 2017/05/06 10:06

    これも今さらながらですが、気が付いたので一言・・・

    > こちらはUpdatePanelを使用してるので値は保持できていました。

    ListB の DropDownList 本体は静的にページに配置してあって、ListA の SelectedIndexChanged イベントで動的に生成するのは中身の ListItem だけの場合、ListItem を生成・追加後は ViewState に情報が維持され、ポストバックの際は ViewState から ListItem が再生成され ListB に追加されるようです。

    UpdatePanel は ListItem の再生成・追加とは関係ないです。UpdatePanel を使わなくても同じ結果が得られるはずです。

    ViewState に ListItem の情報が保持されるというのは、ListB の EnableViewSate を false にして試すと ListItem は再生成・追加されないことから分かると思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る