Populate Multiple Dropdown ListBox at a time using JQuery and JSON

Introduction

To populate the multiple dropdown list box values through AJAX call.

In the below example I’ve populated the 2 dropdown values on tab out of first textbox.

JQuery plugin: jquery-2.1.4.min.js.

Client side

function <FUNCTION NAME> (<PARAMETER OPTIONAL>) {

        $.ajax({

            type: <GET/POST>,
            contentType: "application/json; charset=utf-8",

            url: <TARGET URL>\<SERVER SIDE METHOF NAME>,

            data: JSON.stringify({ <PARAMETER TO SEND>: <VALUE> }),
            async: <true/false>,
            dataType: "json",

            success: function (data) {<TO DO>
              returnflag = true;
            },

            error: function (result) {
                returnflag = null;
            }
        });

Example

Script: by using JSON object bind the values to dropdown,

<script src="Script/jquery-2.1.4.min.js"></script>
<script>
    function PopulateMultipleDDL() {
        var tranTypes = '';
        var returnflag;
        tranTypes = 'aa';

        $.ajax({

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

            url: "WebForm1.aspx/getSourceName",

            data: JSON.stringify({ tranType: tranTypes }),
            async: false,
            dataType: "json",

            success: OnSuccess
        });
    }
    function OnSuccess(data) {

        var Result = JSON.parse(data.d);

        //Empty the dropdown values
        $('#DropDownList1').empty();
        $('#DropDownList2').empty();

        //looping all values in the result and bind it to the DDL
        $.each(Result, function (key, value) {
            $("#DropDownList1").append($("<option></option>").val
            (value.ID).html(value.Name));
            //To Remove the blank values
            $("#DropDownList1 option[value='']").remove();

            $("#DropDownList2").append($("<option></option>").val
           (value.ID1).html(value.Name1));

            //To Remove the blank values
            $("#DropDownList2 option[value='']").remove();
        })
        returnflag = true;

    }

</script>

ASPX controls

<asp:TextBox ID="txtbx" runat="server" onblur="PopulateMultipleDDL();" />

<asp:DropDownList ID="DropDownList1" ClientIDMode="Static" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" ClientIDMode="Static" runat="server">
</asp:DropDownList>

In Server side:

Here I’m creating a dataset with 2 data tables.

The first data table is binded to the DropDownList1 and the second data table is binded to the DropDownList2.

Name spaces:

using System;
using System.Collections.Generic;
using System.Data;
using System.Web.Script.Serialization;
using System.Web.Services;

  [WebMethod]
        public static string getSourceName(string tranType)
        {

            DataRow _dataRow0, _dataRow1, _dataRow2, _dataRow3, _dataRow4, _dataRow5, _dataRow02, _dataRow12;
            DataTable _datatable = new DataTable();
            DataTable _datatable2 = new DataTable();
            _datatable.Columns.Add("Name");
            _datatable.Columns.Add("ID");
            _datatable2.Columns.Add("Name1");
            _datatable2.Columns.Add("ID1");

            _dataRow0 = _datatable.NewRow();
            _dataRow0[0] = "Arun";
            _dataRow0[1] = 1;


            _dataRow1 = _datatable.NewRow();
            _dataRow1[0] = "Aruna";
            _dataRow1[1] = 2;


            _dataRow2 = _datatable.NewRow();
            _dataRow2[0] = "Arun";
            _dataRow2[1] = 3;

            _dataRow3 = _datatable.NewRow();
            _dataRow3[0] = "Aswin";
            _dataRow3[1] = 4;


            _dataRow4 = _datatable.NewRow();
            _dataRow4[0] = "Senthil";
            _dataRow4[1] = 5;

            _dataRow5 = _datatable.NewRow();
            _dataRow5[0] = "ArunKUMARI";
            _dataRow5[1] = 5;

            _datatable.Rows.Add(_dataRow0);
            _datatable.Rows.Add(_dataRow1);
            _datatable.Rows.Add(_dataRow2);
            _datatable.Rows.Add(_dataRow3);
            _datatable.Rows.Add(_dataRow4);
            _datatable.Rows.Add(_dataRow5);

            _dataRow02 = _datatable2.NewRow();
            _dataRow02[0] = "Thava";
            _dataRow02[1] = 1;

            _dataRow12 = _datatable2.NewRow();
            _dataRow12[0] = "Santhose";
            _dataRow12[1] = 2;

            _datatable2.Rows.Add(_dataRow02);
            _datatable2.Rows.Add(_dataRow12);

            DataSet _dataset = new DataSet();
            _dataset.Tables.Add(_datatable);
            _dataset.Tables.Add(_datatable2);

            JavaScriptSerializer JSSerializer = new JavaScriptSerializer();

            List<Dictionary<string, object>> DtRows = new List<Dictionary<string, object>>();
            Dictionary<string, object> newrow = null;
            int i = 0;
            //Code to loop each row in the datatable and add it to the dictionary object
            foreach (DataTable dt in _dataset.Tables)
            {
                foreach (DataRow drow in _dataset.Tables[i].Rows)
                {
                    newrow = new Dictionary<string, object>();
                    foreach (DataColumn col in _dataset.Tables[i].Columns)
                    {
                        newrow.Add(col.ColumnName.Trim(), drow[col]);
                    }
                    DtRows.Add(newrow);
                }
                i ++;
            }
            //Serialising the dictionary object to produce json output
            return JSSerializer.Serialize(DtRows);

        }

The JSON output:

"[{\"Name\":\"Arun\",\"ID\":\"1\"},{\"Name\":\"Aruna\",\"ID\":\"2\"},{\"Name\":\"Arun\",\"ID\":\"3\"},{\"Name\":\"Aswin\",\"ID\":\"4\"},{\"Name\":\"Senthil\",\"ID\":\"5\"},{\"Name\":\"ArunKUMARI\",\"ID\":\"5\"},{\"Name1\":\"Thava\",\"ID1\":\"1\"},{\"Name1\":\"Santhose\",\"ID1\":\"2\"}]"

The above data is parsed and binded to two DDL’s.

function OnSuccess(data) {

    var Result = JSON.parse(data.d);

    //Empty the dropdown values
    $('#DropDownList1').empty();
    $('#DropDownList2').empty();

    //looping all values in the result and bind it to the DDL
    $.each(Result, function (key, value) {
        $("#DropDownList1").append($("<option></option>").val
        (value.ID).html(value.Name));
        //To Remove the blank values
        $("#DropDownList1 option[value='']").remove();

        $("#DropDownList2").append($("<option></option>").val
       (value.ID1).html(value.Name1));

        //To Remove the blank values
        $("#DropDownList2 option[value='']").remove();
    })