Referencing ASP.NET element in JQuery

I don't seem able to simply reference my dropdownlist control by specifying id of the control in this case. Any one able to help?

 <asp:Panel ID="PnlRepImp" runat="server">
          <div class="module-row">
            <table>
                  <tr>
                        <td>
                              <telerik:RadComboBox ID="SelectRole" runat="server" Width="250px" Height="150px"
                EmptyMessage="Select a Company" OnClientSelectedIndexChanged="PageMethods.LoadUsers(this);"  EnableLoadOnDemand="true" ShowMoreResultsBox="true"
                EnableVirtualScrolling="true">
    开发者_开发知识库                          </telerik:RadComboBox>

                        </td>

                  </tr>
            </table>
            </div>

      </asp:Panel>

Also would appreciate information on how I could learn to do this in all cases.

$('#<%= ControlYouWant.ClientID %>')

That should give you a jQuery instance of what you want.

you need to get the client id in your javascript like this

 alert('<%= Control.ClientID %>');

var list=$('<%= "#"+ Control.ClientID %>');

You wouldn't be able to match the ASP.NET control using JQuery selector with ID "SelectRole" because the ID on the ClientID would be something like "ParentControlID_SelectRole". Sometimes you can use something like $("ParentControlID_SelectRole") to match it because you observe during development that that's the client-side ID "consistently" genereated by ASP.NET. I don't like this approach since sometimes you would re-arrange the controls heirarchy and your matching algorithm no longer works.

You can add a CssClass element to your ASP.NET control and set its value equal to the control ID. In this case, you would set CssClass="SelectRole" and then in JQuery, you can match with $(".SelectRole").

Or, you use JQuery wildcard (*) selector to match the element like the following:

 var theCombobox = $("select[id*='SelectRole']"); //assumed to be <select> on client DOM