locked
How to bind drop down list dynamically using ajax without page load RRS feed

  • Question

  • User38654591 posted

    How to bind drop down list dynamically using ajax without page load

    Friday, December 27, 2013 9:05 AM

Answers

  • User-265225665 posted
    <script type="text/javascript">
     
    
     
            function abc()
            {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Webmethod.aspx/BindDataToDropDown",
                    data: "{}",
                    dataType: "Json",
                    success: function (data) {
     
    
                        $.each(data.d, function (index, value) {
                            var newOption = $('<option>');
                            
                            newOption.attr('value', value.ValueField).text(value.TextField);
                            $('#DropDownList1').append(newOption);
     
    
                        })
                    }
                });
            }
        </script>
    
    <form id="form1" runat="server">
       <input type="button" value="Call" id="btn" name="btn" onclick="abc();" />
       <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
       </asp:ScriptManager>
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        </form>
    
    
    Cs page
    
    [WebMethod]
     
    public static DropDownValues[] BindDataToDropDown()
    {
    //method to return values
    }
    
    
    public class DropDownValues
    {
         public int ValueField { get; set; }
         public string TextField { get; set; }
    }
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 27, 2013 9:17 AM
  • User38654591 posted

    Hi Panchal,

    Thanks allot for this solution,

    I tried with this

          function GetApproxUsers() {
              $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  url: "DyanamicSearchPage.aspx/BindDataToDropDown",
                  data: "{'username':'" + $('#txtUserPartialName').val() + "'}",
                  dataType: "Json",
                  success: function (data) {
                      //                  $.each(data.d, function (index, value) {
                      //                      var newOption = $('<option>');
                      //                      newOption.attr('value', value.ValueField).text(value.TextField);
                      //                      $('#DropDownList1').append(newOption);
                      //                  })

                      var div_data = "";
                      $("#ddlEmployee").empty();

                      // loop each record
                      if (data.d.length > 0) {
                          for (var i = 0; i < data.d.length; i++) {
                              div_data += '<option value="' + data.d[i].UserId + '">' + data.d[i].UserName + '</option>';
                          }
                          //div_data += '</select>';
                      }
                      else {
                          //alert("hello");
                          var div_data = "";
                          $("#ddlEmployee").empty();
                          div_data += '<option value="0">No Record Found</option>';
                      }
                      $(div_data).appendTo("#ddlEmployee");
                  }
              });
          }

    only binding way to dropdown with data is in different manner,otherwise everything same like your solution.

    It is working fine.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, December 28, 2013 3:15 AM

All replies

  • User-265225665 posted
    <script type="text/javascript">
     
    
     
            function abc()
            {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Webmethod.aspx/BindDataToDropDown",
                    data: "{}",
                    dataType: "Json",
                    success: function (data) {
     
    
                        $.each(data.d, function (index, value) {
                            var newOption = $('<option>');
                            
                            newOption.attr('value', value.ValueField).text(value.TextField);
                            $('#DropDownList1').append(newOption);
     
    
                        })
                    }
                });
            }
        </script>
    
    <form id="form1" runat="server">
       <input type="button" value="Call" id="btn" name="btn" onclick="abc();" />
       <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
       </asp:ScriptManager>
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        </form>
    
    
    Cs page
    
    [WebMethod]
     
    public static DropDownValues[] BindDataToDropDown()
    {
    //method to return values
    }
    
    
    public class DropDownValues
    {
         public int ValueField { get; set; }
         public string TextField { get; set; }
    }
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 27, 2013 9:17 AM
  • User38654591 posted

    Hi Panchal,

    Thanks allot for this solution,

    I tried with this

          function GetApproxUsers() {
              $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  url: "DyanamicSearchPage.aspx/BindDataToDropDown",
                  data: "{'username':'" + $('#txtUserPartialName').val() + "'}",
                  dataType: "Json",
                  success: function (data) {
                      //                  $.each(data.d, function (index, value) {
                      //                      var newOption = $('<option>');
                      //                      newOption.attr('value', value.ValueField).text(value.TextField);
                      //                      $('#DropDownList1').append(newOption);
                      //                  })

                      var div_data = "";
                      $("#ddlEmployee").empty();

                      // loop each record
                      if (data.d.length > 0) {
                          for (var i = 0; i < data.d.length; i++) {
                              div_data += '<option value="' + data.d[i].UserId + '">' + data.d[i].UserName + '</option>';
                          }
                          //div_data += '</select>';
                      }
                      else {
                          //alert("hello");
                          var div_data = "";
                          $("#ddlEmployee").empty();
                          div_data += '<option value="0">No Record Found</option>';
                      }
                      $(div_data).appendTo("#ddlEmployee");
                  }
              });
          }

    only binding way to dropdown with data is in different manner,otherwise everything same like your solution.

    It is working fine.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, December 28, 2013 3:15 AM