How to access ASP.NET drop down box from jquery

Question

Well, I have a really small problem. How can I access an ASP.NET Drop down list from jquery? I tried to use "CssClass" property of the drop down list to assign a CSS class and then accessing that list using that class, but later I found out that the class changes when an element is selected, so my initial class replaced by a new class.I set the "CssClass" property of that list to "InstrumentDropDown". When the page loads for the first time, its class property is set to "InstrumentDropDown", just as I expected. But when an element is selected, and a postback is made, it becomes something like "InstrumentDropDown sg selected" (may be there are underscore between words instead of spaces)

I also cannot use the "ClientID" property because the part of code that access that list is not inside the page, but in a separate javascript file.

So how can I access it ?

Answer 1

The easiest thing I can think of is wrap your Drop Down List inside a element with another id. That way, you can reference it like this rather than worrying about ASP.NET ClientIDs.

Script:

$('#dropDown select');

Markup:

<div id="dropDown">
    <asp:DropDownList ID="DropDownList1" runat="server">
    </asp:DropDownList>
</div>

Answer 2

When the page loads, use the class to find the dropdown box and store the id of the element in a variable.

 $(function() {
      var $ddl = $('select.myClass'); // get here

      $('.somethingelse').click( function() {
            $.get('...',function(data) {
                $ddl.html(data);  // use here
            }
      }
 });

Answer 3

If there's only one of the dropdown on the page and you're sure of this, you can also find it by ID using the attribute ends-with selector ($=), like this:

$("[id$=dropDownID]")

This would for example find: <select id="MasterPage$Content$dropDownID">

Answer 4

In the case the CssClass name changes OnPostback this selector will work...

$(document).ready(function(){ 

   $('select.InstrumentDropDown_sg_selected, select.InstrumentDropDown').change(function(){
      var yourValue = $(this).val(); //retrieve value
      $(this).val('someValue'); //set value
   });

});