I want to apply the onchange event to select dropdown in table using jQuery lttable id34ctl00contentPlaceHolderGrLed34 class34PlaceNormalFont34 cellspacing34034 rules34all34 border34134 style34bordercollapsecollapse34gt lttr style34backgroundcolorA55129colorWhitefontweightbold34gt ltth scope34col34gtTranIDltthgtltth scope34col34gtDateltthg

lthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltscript type 34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery1jqueryminjs34gtltscriptgt ltscript type34textjavascript34gt 34idGrLed select34live34change34 function alertthisattr34id34 ltscriptgtltheadgtltbodygt ltform id34form134 runat 34server34gt lttable id34ctl00contentPlaceHolderGrLed34 class34PlaceNormalFont34 cellspacing34034 rules34all34 border34134 style34bordercollapsecollapse34gt lttr style34backgroundcolorA55129colorWhitefontweightbold34gt ltth scope34col34gtTranIDltthgtltth scope34col34gtDateltthgtltth scope34col34gtModeltt

Apply onchange event to select dropdown in table using jQuery

vinayak

SOLVED CLOSED ACTIVE ANSWERED
User: vinayak
Posted: on Nov 28, 2011 09:41 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 14145

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>

Mudassar

0 1

Reply
ANSWER
User: Mudassar
Replied: on Nov 28, 2011 09:41 PM
Report

<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

Apply onchange event to select dropdown in table using jQuery

Company

Explore

Follow us

Contact Us