Apply onchange event to select dropdown in table using jQuery

Last Reply on Nov 28, 2011 09:41 PM By Mudassar

Posted on Nov 28, 2011 09:41 PM

I want to apply the onchange event to select dropdown in table using jQuery

 

<table id="ctl00_contentPlaceHolder_Gr_Led" class="PlaceNormalFont" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;"> 
                        <tr style="background-color:#A55129;color:White;font-weight:bold;"> 
                                <th scope="col">TranID</th><th scope="col">Date</th><th scope="col">Mode</th><th scope="col">Ref.No</th><th scope="col">Ref.Date</th><th scope="col">Payment</th><th scope="col">Rebate</th><th scope="col">Remark</th><th scope="col">Expense</th><th scope="col">Status</th><th scope="col">Status1</th><th scope="col">Update</th> 
 
                        </tr><tr style="background-color:#FFF7E7;"> 
                                <td>102</td><td>29.Nov.2011</td><td>Cash</td><td>9</td><td>29.Nov.2011</td><td>100</td><td>0</td><td>&nbsp;</td><td>0</td><td>Cleared</td><td><select name="ctl00$contentPlaceHolder$Gr_Led$ctl02$Dr_TranStates" id="ctl00_contentPlaceHolder_Gr_Led_ctl02_Dr_TranStates"> 
                                        <option selected="selected" value="Cleared">Cleared</option> 
                                        <option value="Pending">Pending</option> 
 
                                        <option value="Cancelled">Cancelled</option> 
                                        <option value="On Hold">On Hold</option> 
 
                                </select></td><td><input type="submit" name="ctl00$contentPlaceHolder$Gr_Led$ctl02$TranUpdate0" value="Save" id="ctl00_contentPlaceHolder_Gr_Led_ctl02_TranUpdate0" /></td> 
                        </tr><tr style="background-color:#FFF7E7;"> 
                                <td>103</td><td>12.Nov.2011</td><td>Other</td><td>11</td><td>12.Nov.2011</td><td>100</td><td>0</td><td>&nbsp;</td><td>0</td><td>Cleared</td><td><select name="ctl00$contentPlaceHolder$Gr_Led$ctl03$Dr_TranStates" id="ctl00_contentPlaceHolder_Gr_Led_ctl03_Dr_TranStates"> 
 
                                        <option selected="selected" value="Cleared">Cleared</option> 
                                        <option value="Pending">Pending</option> 
                                        <option value="Cancelled">Cancelled</option> 
                                        <option value="On Hold">On Hold</option> 
 
                                </select></td><td><input type="submit" name="ctl00$contentPlaceHolder$Gr_Led$ctl03$TranUpdate1" value="Save" id="ctl00_contentPlaceHolder_Gr_Led_ctl03_TranUpdate1" /></td> 
                        </tr> 
 
                </table>

 

Posted on Nov 28, 2011 09:41 PM
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $("[id$=Gr_Led] select").live("change", function () {
            alert($(this).attr("id"));
        });
    </script>
</head>
<body>
    <form id="form1" runat = "server">
       <table id="ctl00_contentPlaceHolder_Gr_Led" class="PlaceNormalFont" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;"> 
                        <tr style="background-color:#A55129;color:White;font-weight:bold;"> 
                                <th scope="col">TranID</th><th scope="col">Date</th><th scope="col">Mode</th><th scope="col">Ref.No</th><th scope="col">Ref.Date</th><th scope="col">Payment</th><th scope="col">Rebate</th><th scope="col">Remark</th><th scope="col">Expense</th><th scope="col">Status</th><th scope="col">Status1</th><th scope="col">Update</th> 
 
                        </tr><tr style="background-color:#FFF7E7;"> 
                                <td>102</td><td>29.Nov.2011</td><td>Cash</td><td>9</td><td>29.Nov.2011</td><td>100</td><td>0</td><td>&nbsp;</td><td>0</td><td>Cleared</td><td><select name="ctl00$contentPlaceHolder$Gr_Led$ctl02$Dr_TranStates" id="ctl00_contentPlaceHolder_Gr_Led_ctl02_Dr_TranStates"> 
                                        <option selected="selected" value="Cleared">Cleared</option> 
                                        <option value="Pending">Pending</option> 
 
                                        <option value="Cancelled">Cancelled</option> 
                                        <option value="On Hold">On Hold</option> 
 
                                </select></td><td><input type="submit" name="ctl00$contentPlaceHolder$Gr_Led$ctl02$TranUpdate0" value="Save" id="ctl00_contentPlaceHolder_Gr_Led_ctl02_TranUpdate0" /></td> 
                        </tr><tr style="background-color:#FFF7E7;"> 
                                <td>103</td><td>12.Nov.2011</td><td>Other</td><td>11</td><td>12.Nov.2011</td><td>100</td><td>0</td><td>&nbsp;</td><td>0</td><td>Cleared</td><td><select name="ctl00$contentPlaceHolder$Gr_Led$ctl03$Dr_TranStates" id="ctl00_contentPlaceHolder_Gr_Led_ctl03_Dr_TranStates"> 
 
                                        <option selected="selected" value="Cleared">Cleared</option> 
                                        <option value="Pending">Pending</option> 
                                        <option value="Cancelled">Cancelled</option> 
                                        <option value="On Hold">On Hold</option> 
 
                                </select></td><td><input type="submit" name="ctl00$contentPlaceHolder$Gr_Led$ctl03$TranUpdate1" value="Save" id="ctl00_contentPlaceHolder_Gr_Led_ctl03_TranUpdate1" /></td> 
                        </tr> 
 
                </table>
    </form>
</body>
</html>

Demo