How to populate dropdown using jquery

Hi !

I have started to post some code stuff using jquery in asp.net .

Today, I am writing about how to fill drop down using jquery and how to get dropdown selected value.

I have tried to simplify my coding so that it could be understandable.If you have any confusion , contact me at : mkumar.soft@gmail.com.

So, lets start:

We have two scenario: 

1. Fill dropdown using Jquery

2. Work on value selection of dropdown.

For this let's create a task:

We have a list of country and state and need to fill country dropdown on page load and on the selection of country ,state should be filled on the basis of selected country code.

For this we need to add jquery reference on our page ,like :-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

Another simple work need to be done :

                                   add  two dropdowns on the aspx page:

   <select id="ddlCountry"></select>

   

   <select id="ddlstate"></select>

//asp dropdown can be also added here 

Our next step is to create a web method as below to get country list:

    [WebMethod]

    public static List<Country> GetCountries()

    { 

         //You can get data from data base and add in list

        List<Country> countries = new List<Country>();

        countries.Add(new Country { ID = "1", CountryName = "India" });

        countries.Add(new Country { ID = "2", CountryName = "Singapore" });

        countries.Add(new Country { ID = "3", CountryName = "Malaysia" });

        return countries;

    }

//create a class Named country with required public member:-

public class Country

{

    public string CountryID;

    public string CountryName;

//state id and state Name will be used in state binding

    public string StateId;

    public string StateName;

   

}

Now it's time to populate country list in dropdown using jquery. let's see:

<script type="text/javascript">

                $(document).ready(function() {

                $.ajax({

                type: "POST",

                contentType: "application/json; charset=utf-8",

                url: "jquerytest.aspx/GetCountries",

                data: "{}",

                dataType: "json",

                success: function(data) {

                $.each(data.d, function(text, value) {

                $("#ddlCountry").append($("<option>     </option>").val(value.CountryID).html(value.CountryName));

                });

                },

                error: function(result) {

                alert("Error");

                }

                });

                });

                

   </script>             

 Copy and paste the above code .That's it .Country list will populate in ddlcountry dropdown.

Now Our second scenario :-to get state name on the basis of selected country name.

for this we are going to create another function and call it on ONCHANGE() event of dropdown.

<select  id="ddlCountry" onchange="return ddlselected()" / >

<script type="text/javascript">

 function ddlselected()

 {

 var a=$("#ddlCountry option:selected").val();   //To get selected value of ddlCountry  

 $(document).ready(function() {

                $.ajax({

                type: "POST",

                contentType: "application/json; charset=utf-8",

                url: "jquerytest.aspx/GetState",

                data:"{'St':'"+a+"'}",//country name as parameter

                cache:false,                

                dataType: "json",

                success: function(data) {                

                $("#ddlstate").empty();// use this to clear ddlstate before populate new data

                $.each(data.d, function(key, value) {

                $("#ddlstate").append($("<option></option>").val(value.StateId).html(value.StateName));

                });

                },

                error: function(result) {

                alert("Error");

                }

                });

                });

Now create another web method to get state name :-

    [WebMethod]

    public static List<Country> GetState(string St)

    { 

//here I am assuming that we have already get state list on the basis of sql query .

        List<Country> State = new List<Country>();

        State.Add(new Country { StateId = "1", StateName = "Bihar" });

        State.Add(new Country { StateId = "2", StateName = "UP" });

        State.Add(new Country { StateId = "3", StateName = "Delhi" });

        State.Add(new Country { StateId = "4", StateName =  St.ToString() });

        return State;

    }

That's it.  How it is simple! .

Any confusing ,Don't hesitate  to contact on :mkumar.soft@gmail.com

enjoy coding.