• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1611
  • Last Modified:

how to load values of dropdown list control using jquery in asp.net website

I have a web page which contains a country dropdown list which gets filled on page load.
I want to load the state list when a country is selected using jquery,

is it possible with sever control as both country and state list controls are server side.

if yes pls provide me some examples
  • 3
1 Solution
Let's presume you are getting the info from the drop down list from a db ... just to make it interesting.

FIRST - the JQUERY.  Get the data from (in this case) a generic handler.  We make an AJAX GET request (passing dummy data to the handler ... since I can't predict your data architecture).  When the info has been passed successfully, we have a callback function that hanldes the population of the dropdown.

        // asp dropdownlist
            {firstname:'Mista', lastname:'Bigg', age:43},
                function(data) {

I'm setting this up with a hander because it will be useful for those using databases who want to call server-side functionality without the burden of viewstate or ineffective .net postbacks.  Here's the JSON string/array that is being returned from the Generic Handler but if you don't like this just make any old array and it'll do.

context.Response.Write("{'44352' : 'East Desolation', '98872' : 'DownTown Branch', '56821' : 'South Side'}");

Here's the function that populates the asp:dropdownlist: VERY IMPORTANT you have to use the name of the control that is generated from the CLR (ctl00_ContentPlaceHolder1_drpOffices)  NOT drpOffices.

function populateOffices(genArray) {
    $.each(genArray, function(val, text) {

And here's the dropdownlist:

<asp:DropDownList ID="drpOffices" runat="server" />

I am presuming you are familiar with how to set this stuff up.  
I might not have made it clear how this answers your question.  I *think* what you are saying is that you want to have cascading drop downs.  They pick a country and then the state dropdown gets populated.  All you do is you rig up the country to execute a call to a generic handler (or it could be a service, a class, a controller call ....) ... the Jquery handles the callback, using the param/value from the Country dropdownlist that you have selected, we employ the AJAX call that I provided, passing the Country param, and it returns an arraylist/stringarray of states which gets populated to the State dropdown (which I called drpOffices in my sample).

That will get you going.  If you want to know how to read the "country" value off of the first drop down, that should be a separate question.

Hope this helps.
I forgot to mention, if you bypass the .net postback and use JQuery AJAX then you need to put EnableEventValidation="false" in the page directive.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now