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" %>
  3. <!DOCTYPE html>
  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;
  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;
  10. namespace XMLWrite
  11. {
  12. public partial class BindDropDown : System.Web.UI.Page
  13. {
  14. protected void Page_Load(object sender, EventArgs e)
  15. { }
  17. public class StudentDetails
  18. {
  19. public int Id { get; set; }
  20. public string Name { get; set; }
  21. }
  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.