Question

i want to use jquery’s function on dropdownlist’s OnTextChanged Event. but i dont know why its not firing. my code is,

    <asp:GridView ID="grd_test" runat="server" Style="text-align: center;
                width: 375px;" AutoGenerateColumns="false">

                <Columns>

                    <asp:TemplateField HeaderText="Test">
                        <ItemTemplate>
                            <asp:DropDownList ID="drp_test"  OnTextChanged='<%# "return CheckVal(this);" %>' runat="server">
                                <asp:ListItem Value="">0</asp:ListItem>
                                <asp:ListItem Value="1"> 1</asp:ListItem>
                                <asp:ListItem Value="2">2</asp:ListItem>
                                <asp:ListItem Value="3">3</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

my javascript’s code is

    function CheckVal(obj) {
        var collection = document.getElementById(obj.parentNode.id).getElementsByTagName('SELECT');

        for (var x = 0; x < collection.length - 1; x++) {
            if (collection[x].type.toUpperCase() == 'SELECT-ONE') {
                alert(collection[x].value);
            }

}
}

Answer 1

Putting aside the fact that I can’t see any jQuery on the code sample you’ve provided, the select element (i.e. your DropDownList object) uses an OnChange event, not OnTextChanged. If you want something to fire when the user changes the selection this is probably why you’re not seeing anything.

Given you have a number of tables, each containing a set of select elements, you’re going to want to listen for any change to a given table’s select boxes. Here’s how you would monitor the change event for each individual table in your repeated gridviews:

$('table[id$=drp_test]').each(function(){

   $('select', this).change(function(){
      console.info($('option:selected', this).text());
   });

});

This looks at each table on your page whose element ID ends with “drp_test” and adds an event handler to all its select elements.

Now we need to modify this to check the other values from the changed select element’s siblings. The end result is that we need to ensure each of the selected options for that table’s group is unique.

$('table[id$=drp_test]').each(function () {

    var selects = $('select', this);

    // For each select...
    selects.each(function () {
        // Whenever one changes, fire this event
        $(this).change(function () {

            // Gather all the chosen options from this group
            var arr = $.map($('option:selected', selects), function (n) {
                return n.value;
            });

            // And calculate how many unique values we find.
            console.info("The number of duplicated values is " + (arr.length - ($.unique(arr).length)));
        });
    });

});

The end result is that you get a count of how many non-unique selected values you have in each table.