Question

I am using ASP.NET and in my .aspx page I have the following code, and, based on the selection, I am displaying the appropriate divs. It’s working great, as is, but the question is: How do I get the value (whatever selected by user) on code-behind?

<select id="filterResultsBy"  >
    <option value="">Select...</option>
    <option value="Date">Date</option>
    <option value="Subject">Subject</option> 
    <option value="Status">Status</option>
</select>

If I add runat="server" or use the server asp:DropDownList control, jQuery does not work.

$('#ddlFilter').change(function(){ 
   var sel = $(this).val(); 
   if(sel === 'DATE'){ 
     hideAll();// a function to hide all the divs first 
     $('#divDateRangeSearch').show(); 
   } else if(sel === 'SUBJECT'){ 
     ///so on... 
   } 
}); 

Answer 1

In ASP.NET the usual convention is to use server side controls which work better with the Postback model. So you could use the equivalent:

<asp:DropDownList ID="filterResultsBy" runat="server" CssClass="ddlFilter">
    <asp:ListItem Value="" Text="Select..." />
    <asp:ListItem Value="Date" Text="Date" />
    <asp:ListItem Value="Subject" Text="Subject" />
    <asp:ListItem Value="Status" Text="Status" />
</asp:DropDownList>

which would allow you to access the filterResultsBy variable in the code behind and retrieve the currently selected value. To make this work with client scripting libraries such as jQuery add a class and use a class selector instead of id selector because of the name mangling that occurs in ASP.NET server side controls:

$('.ddlFilter').change(function() {
    var sel = $(this).val(); 
    if(sel === 'DATE') { 
        hideAll(); // a function to hide all the divs first 
        $('#divDateRangeSearch').show(); 
    } else if (sel === 'SUBJECT') { 
        ///so on... 
    } 
});