0

これは初心者の質問です。私はjQueryを1日ほど使用しています。

ドロップダウンメニューの各変更をキャプチャしたいだけです。

これが私のドロップダウンメニューとリファレンスです：

 <script src="Scripts/insertRootCauseElements.js" type="text/javascript"></script>
 <asp:DropDownList ID="DropDownListRootCause" runat="server" > </asp:DropDownList>

ここに私のハンドラがあります:

    $(document).ready(function () {

    //    var selectedValue = $('#DropDownListRootCause').selectedValue;
    //var selectedIndex = $('#DropDownListRootCause').selectedIndex;
    alert("HERE");
    $('#DropDownListRootCause').change(function () {
    alert("Changed " + $('#DropDownListRootCause').selectedIndex);
})
.change();
//    if ($('#DropDownListRootCause').change) {
//        alert("dd change " + selectedIndex);
//    }


})

私は多くのバリエーションを試しましたが、何もうまくいきません。デバッグ時に、私の jQuery は "DropDownListRootCause" が何であるかを認識していないようです。

jQueryを見つけるddコントロールでAutoPostBack = trueを設定しましたが、

$('#DropDownListRootCause').change(function () {
    alert("Changed " + $('#DropDownListRootCause').selectedIndex);
})

それでも false に評価されます。

「DropDownListRootCause」が未定義であることを明らかにするデバッグ時に、DropDownListRootCause を「Watch」に追加しました。二重引用符と一重引用符を試しましたが、うまくいきません。

それは単純なものに違いないのですが、私には見えません。誰か助けてくれませんか？

4

1 に答える 1

2

ソースHTMLで気付いた場合、ASP.NetはIDを大幅に変更します。多くの場合、次のようになります$ctr001_DropDownListRootCause。これが、セレクターが機能しない理由です。

selectメニューを正しく選択するには、次の2つの方法があります。

  1. $('[id$="DropDownListRootCause"]') これは、selectorで終わる属性を実行しています。
  2. $('#<%=DropDownListRootCause.ClientID %>') ASP.Netは、その完全なIDをセレクターに書き込みます。 注：これは、JavaScriptが.aspxファイル内にある場合にのみ使用できます。これを.jsファイルで使用しようとすると、ASP.Netはページのレンダリング時にこれらのファイルに対して何も行わないため、機能しません。

また、セレクターで終わるものは、より具体的に変更することができます。

$('select[id$="DropDownListRootCause"]')

編集：

セレクターの最後には落とし穴があります。このselect要素がGridView行またはの中にあるRepeater場合、セレクターはそれらすべてに一致します。あなたがこれを持っていると言うGridView：

<asp:GridView ID="gv"
    runat="server"
    AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:DropDownList ID="DropDownListRootCause" runat="server" ></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

（綿毛を削除しました）次のようなHTMLが生成されます。

<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$0&#39;)">
    <td>
        <select name="gv$ctl03$DropDownListRootCause" id="gv_DropDownListRootCause_0"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$1&#39;)">
    <td>
        <select name="gv$ctl04$DropDownListRootCause" id="gv_DropDownListRootCause_1"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$2&#39;)">
    <td>
        <select name="gv$ctl05$DropDownListRootCause" id="gv_DropDownListRootCause_2"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$3&#39;)">
    <td>
        <select name="gv$ctl06$DropDownListRootCause" id="gv_DropDownListRootCause_3"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$4&#39;)">
    <td>
        <select name="gv$ctl07$DropDownListRootCause" id="gv_DropDownListRootCause_4"></select>
    </td>
</tr>

繰り返しになりますが、私が話していることを示すために必要のない多くのマークアップを削除しました。そのレンダリングされたHTMLで、を使用すると5つの要素$('[id$="DropDownListRootCause"]')が選択されます。同じイベントコードを5つの要素すべてに接続しようとしている場合は、問題ありません。ただし、そのうちの1つだけで何かをしようとしている場合は、セレクターをより具体的にする必要があります。 select

于 2012-10-19T16:46:45.993 に答える