Post
Ask Question

Select Option Or Drop-Down Bind Using JavaScript

Introduction

 
In this article, I will discuss how to bind a select option on drop-down using pure JavaScript. Client-side binding is faster than that of the server-side. So, I need to bind the select option or drop-down using JavaScript.
 
Example 
 
To achieve my goal, I will present a demo here. In the below demo, I will bind the student names in the dropdown. 
 
Client-side code
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BindDropDown.aspx.cs" Inherits="XMLWrite.BindDropDown" %>    
  2.     
  3. <!DOCTYPE html>    
  4.     
  5. <html xmlns="http://www.w3.org/1999/xhtml">    
  6. <head runat="server">    
  7.     <title></title>    
  8.     <script type="text/javascript">    
  9.         var ddlStudents;    
  10.         function GetStudentDetails() {    
  11.             ddlStudents = document.getElementById("<%=ddlStudents.ClientID %>");    
  12.     PageMethods.GetStudentDetails(OnSuccess);    
  13. }    
  14.         window.onload = GetStudentDetails;    
  15.     
  16. function OnSuccess(response) {    
  17.     ddlStudents.options.length = 0;    
  18.     AddOption("Please select", "0");    
  19.     for (var i in response) {    
  20.         AddOption(response[i].Name, response[i].Id);    
  21.     }    
  22. }    
  23. function AddOption(text, value) {    
  24.     var option = document.createElement('option');    
  25.     option.value = value;    
  26.     option.innerHTML = text;    
  27.     ddlStudents.options.add(option);    
  28. }    
  29.     </script>    
  30. </head>    
  31. <body>    
  32.     <form id="form1" runat="server">    
  33.         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">    
  34.         </asp:ScriptManager>    
  35.         <div>    
  36.             <asp:DropDownList ID="ddlStudents" runat="server">    
  37.             </asp:DropDownList>    
  38.         </div>    
  39.     </form>    
  40. </body>    
  41. </html>   
Server-side code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Script.Services;  
  6. using System.Web.Services;  
  7. using System.Web.UI;  
  8. using System.Web.UI.WebControls;  
  9.   
  10. namespace XMLWrite  
  11. {  
  12.     public partial class BindDropDown : System.Web.UI.Page  
  13.     {  
  14.         protected void Page_Load(object sender, EventArgs e)  
  15.         {  }
  16.   
  17.         public class StudentDetails  
  18.         {  
  19.             public int Id { get; set; }  
  20.             public string Name { get; set; }  
  21.         }  
  22.   
  23.         [WebMethod]  
  24.         public static List<StudentDetails> GetStudentDetails()  
  25.         {  
  26.             List<StudentDetails> lstStudentDetails = new List<StudentDetails>();  
  27.             StudentDetails studentDetails = new StudentDetails();  
  28.             studentDetails.Id = 1;  
  29.             studentDetails.Name = "Pradosh";  
  30.             lstStudentDetails.Add(studentDetails);  
  31.             studentDetails = new StudentDetails();  
  32.             studentDetails.Id = 2;  
  33.             studentDetails.Name = "Bibhu";  
  34.             lstStudentDetails.Add(studentDetails);  
  35.             studentDetails = new StudentDetails();  
  36.             studentDetails.Id = 3;  
  37.             studentDetails.Name = "Niladri";  
  38.             lstStudentDetails.Add(studentDetails);  
  39.             studentDetails = new StudentDetails();  
  40.             studentDetails.Id = 4;  
  41.             studentDetails.Name = "Brahma";  
  42.             lstStudentDetails.Add(studentDetails);  
  43.             return lstStudentDetails;  
  44.         }  
  45.     }  
  46. }  

Summary

 
I hope the above example will help you to bind the dropdown using JavaScript.