Post
Ask Question

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

  1. function <FUNCTION NAME> (<PARAMETER OPTIONAL>) {    
  2.        
  3.         $.ajax({    
  4.     
  5.             type: <GET/POST>,    
  6.             contentType: "application/json; charset=utf-8",    
  7.     
  8.             url: <TARGET URL>\<SERVER SIDE METHOF NAME>,    
  9.     
  10.             data: JSON.stringify({ <PARAMETER TO SEND>: <VALUE> }),    
  11.             async: <true/false>,    
  12.             dataType: "json",    
  13.     
  14.             success: function (data) {<TO DO>    
  15.               returnflag = true;    
  16.             },    
  17.     
  18.             error: function (result) {    
  19.                 returnflag = null;    
  20.             }    
  21.         });         
Example

Script: by using JSON object bind the values to dropdown,
  1. <script src="Script/jquery-2.1.4.min.js"></script>  
  2. <script>  
  3.     function PopulateMultipleDDL() {  
  4.         var tranTypes = '';           
  5.         var returnflag;     
  6.         tranTypes = 'aa';  
  7.   
  8.         $.ajax({  
  9.   
  10.             type: "POST",  
  11.             contentType: "application/json; charset=utf-8",  
  12.   
  13.             url: "WebForm1.aspx/getSourceName",  
  14.   
  15.             data: JSON.stringify({ tranType: tranTypes }),  
  16.             async: false,  
  17.             dataType: "json",  
  18.   
  19.             success: OnSuccess  
  20.         });  
  21.     }  
  22.     function OnSuccess(data) {  
  23.   
  24.         var Result = JSON.parse(data.d);  
  25.   
  26.         //Empty the dropdown values              
  27.         $('#DropDownList1').empty();  
  28.         $('#DropDownList2').empty();  
  29.   
  30.         //looping all values in the result and bind it to the DDL  
  31.         $.each(Result, function (key, value) {  
  32.             $("#DropDownList1").append($("<option></option>").val  
  33.             (value.ID).html(value.Name));  
  34.             //To Remove the blank values  
  35.             $("#DropDownList1 option[value='']").remove();  
  36.   
  37.             $("#DropDownList2").append($("<option></option>").val  
  38.            (value.ID1).html(value.Name1));  
  39.   
  40.             //To Remove the blank values  
  41.             $("#DropDownList2 option[value='']").remove();  
  42.         })  
  43.         returnflag = true;  
  44.   
  45.     }  
  46.   
  47. </script>  
ASPX controls
  1. <asp:TextBox ID="txtbx" runat="server" onblur="PopulateMultipleDDL();" />  
  2.   
  3. <asp:DropDownList ID="DropDownList1" ClientIDMode="Static" runat="server">  
  4. </asp:DropDownList>  
  5. <asp:DropDownList ID="DropDownList2" ClientIDMode="Static" runat="server">  
  6. </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:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Web.Script.Serialization;  
  5. using System.Web.Services;  
  6.   
  7.   [WebMethod]  
  8.         public static string getSourceName(string tranType)  
  9.         {  
  10.   
  11.             DataRow _dataRow0, _dataRow1, _dataRow2, _dataRow3, _dataRow4, _dataRow5, _dataRow02, _dataRow12;  
  12.             DataTable _datatable = new DataTable();  
  13.             DataTable _datatable2 = new DataTable();  
  14.             _datatable.Columns.Add("Name");  
  15.             _datatable.Columns.Add("ID");             
  16.             _datatable2.Columns.Add("Name1");  
  17.             _datatable2.Columns.Add("ID1");             
  18.   
  19.             _dataRow0 = _datatable.NewRow();  
  20.             _dataRow0[0] = "Arun";  
  21.             _dataRow0[1] = 1;  
  22.             
  23.   
  24.             _dataRow1 = _datatable.NewRow();  
  25.             _dataRow1[0] = "Aruna";  
  26.             _dataRow1[1] = 2;  
  27.             
  28.   
  29.             _dataRow2 = _datatable.NewRow();  
  30.             _dataRow2[0] = "Arun";  
  31.             _dataRow2[1] = 3;  
  32.   
  33.             _dataRow3 = _datatable.NewRow();  
  34.             _dataRow3[0] = "Aswin";  
  35.             _dataRow3[1] = 4;  
  36.            
  37.   
  38.             _dataRow4 = _datatable.NewRow();  
  39.             _dataRow4[0] = "Senthil";  
  40.             _dataRow4[1] = 5;  
  41.             
  42.             _dataRow5 = _datatable.NewRow();  
  43.             _dataRow5[0] = "ArunKUMARI";  
  44.             _dataRow5[1] = 5;  
  45.              
  46.             _datatable.Rows.Add(_dataRow0);  
  47.             _datatable.Rows.Add(_dataRow1);  
  48.             _datatable.Rows.Add(_dataRow2);  
  49.             _datatable.Rows.Add(_dataRow3);  
  50.             _datatable.Rows.Add(_dataRow4);  
  51.             _datatable.Rows.Add(_dataRow5);  
  52.   
  53.             _dataRow02 = _datatable2.NewRow();  
  54.             _dataRow02[0] = "Thava";  
  55.             _dataRow02[1] = 1;  
  56.             
  57.             _dataRow12 = _datatable2.NewRow();  
  58.             _dataRow12[0] = "Santhose";  
  59.             _dataRow12[1] = 2;  
  60.               
  61.             _datatable2.Rows.Add(_dataRow02);  
  62.             _datatable2.Rows.Add(_dataRow12);  
  63.   
  64.             DataSet _dataset = new DataSet();  
  65.             _dataset.Tables.Add(_datatable);  
  66.             _dataset.Tables.Add(_datatable2);  
  67.   
  68.             JavaScriptSerializer JSSerializer = new JavaScriptSerializer();  
  69.               
  70.             List<Dictionary<string, object>> DtRows = new List<Dictionary<string, object>>();  
  71.             Dictionary<string, object> newrow = null;  
  72.             int i = 0;  
  73.             //Code to loop each row in the datatable and add it to the dictionary object  
  74.             foreach (DataTable dt in _dataset.Tables)  
  75.             {  
  76.                 foreach (DataRow drow in _dataset.Tables[i].Rows)  
  77.                 {  
  78.                     newrow = new Dictionary<string, object>();  
  79.                     foreach (DataColumn col in _dataset.Tables[i].Columns)  
  80.                     {  
  81.                         newrow.Add(col.ColumnName.Trim(), drow[col]);  
  82.                     }  
  83.                     DtRows.Add(newrow);  
  84.                 }  
  85.                 i ++;  
  86.             }  
  87.             //Serialising the dictionary object to produce json output  
  88.             return JSSerializer.Serialize(DtRows);  
  89.   
  90.         }  
The JSON output:
  1. "[{\"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.
  1. function OnSuccess(data) {  
  2.   
  3.     var Result = JSON.parse(data.d);  
  4.   
  5.     //Empty the dropdown values              
  6.     $('#DropDownList1').empty();  
  7.     $('#DropDownList2').empty();  
  8.   
  9.     //looping all values in the result and bind it to the DDL  
  10.     $.each(Result, function (key, value) {  
  11.         $("#DropDownList1").append($("<option></option>").val  
  12.         (value.ID).html(value.Name));  
  13.         //To Remove the blank values  
  14.         $("#DropDownList1 option[value='']").remove();  
  15.   
  16.         $("#DropDownList2").append($("<option></option>").val  
  17.        (value.ID1).html(value.Name1));  
  18.   
  19.         //To Remove the blank values  
  20.         $("#DropDownList2 option[value='']").remove();  
  21.     })