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

Posted on 2009-04-21
Last Modified: 2012-05-06
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
Question by:ziorrinfotech
    LVL 1

    Expert Comment

    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.  
    LVL 1

    Accepted Solution

    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.
    LVL 1

    Expert Comment

    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.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now