如何使用javascript在asp.net中的gridview中获取下拉列表的选定值？

Question

I have a gridview, which has multiple rows. One column is dropdownlist. I need to find the selected value of dropdownlist for each row. When I view Page source , Its generating id StartHourDropDown for dropdown. But name for each dropdownlist is different for example grvRewardRulesDetails$ctl02$StartHourDropDown. So how to get selected value of dropdownlist of any nth row.

Answer 1

for the dropdown in gridView you can put

<asp:DropDownList ID="StartHourDropDown" runat="server" onchange='javascript:functionChange(this)' >

you can select from the dropdown using

functionChange(data)
{
    var currentDropDownValue = document.getElementById(data.id).value;
}

Answer 2

You can use jquery as follows

$("#grvRewardRulesDetails").eq(n).find("Select");

for value you can use

 $("#grvRewardRulesDetails").eq(n).find("Select").val()

The above will give you the nth dropdown list.

Here is an equation API of jQuery

Answer 3

I like to add a CSS class to the DropDownList to make it easy to get with a jQuery selector . This method has the advantage of not having to worry about ID's. It does mean that you will need to have jQuery. Most of the time websites already include it (it's included by default in the ASP.NET Web Forms New Site template). It's also available from NuGet if you're using Visual Studio.

You'll need a reference to jQuery in the header. Let's load it from the Google CDN. This is easy, because you don't have to download the script and place it in your site, and it's nice for the client because it will load faster due to caching. Alternatively, go download and self-host it.

<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList runat="server" CssClass="gvddl" />
</ItemTemplate>
</asp:TemplateField>

Then in your JavaScript.

function MyFunction()
{
    $(".gvddl") //do something with it
}