Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fill a DropDown using Jquery Ajax Call?

I have a WebMethod which gets data that I want to fill DropDown with in a DataSet. Currently I am filling the dropdown using a hardcoded object. But I want to replace this hard coded object with data returned by webmethod.

 [System.Web.Services.WebMethod]
         public static string GetDropDownDataWM(string name)
         {
             //return "Hello " + name + Environment.NewLine + "The Current Time is: "
             //    + DateTime.Now.ToString();

             var msg = "arbaaz";

             string[] name1 = new string[1];
             string[] Value = new string[1];
             name1[0] = "@Empcode";
             Value[0] = HttpContext.Current.Session["LoginUser"].ToString().Trim();
             DataSet ds = new DataSet();
             dboperation dbo = new dboperation();
             ds = dbo.executeProcedure("GetDropDownsForVendor", name1, Value, 1);

             return ds.GetXml(); 

         }

CLIENT SIDE(UPDATE 1):

  <script type = "text/javascript">
    function GetDropDownData() {
        var myDropDownList = $('.myDropDownLisTId');

        $.ajax({
            type: "POST",
            url: "test.aspx/GetDropDownDataWM",
            data: '{name: "abc" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $.each(jQuery.parseJSON(data.d), function () {
                    myDropDownList.append($("<option></option>").val(this['FieldDescription']).html(this['FieldCode']));
                });
            },
            failure: function (response) {
                alert(response.d);
            }
        });
    }
    function OnSuccess(response) {
        console.log(response.d);
        alert(response.d);
    }
</script>
like image 296
SamuraiJack Avatar asked Apr 09 '14 07:04

SamuraiJack


People also ask

How do I populate a Dropdownlist with JSON data as Ajax response in jQuery?

First we start off by creating a HTML dropdown on the page with an ID attribute. Next we create an AJAX POST in jQuery to a urlPath that will return the data we need in a JSON object. On the return of this AJAX request we are going to parse the response and use this in the helpers.

How can I set the value of a Dropdownlist using jQuery?

Use $('select[id="salesrep"]'). val() to retrieve the selected value. Use $('select[id="salesrep"]'). val("john smith") to select a value from dropdown.


2 Answers

 var theDropDown = document.getElementById("myDropDownLisTId");
                theDropDown.length = 0;
                $.each(items, function (key, value) {

                    $("#myDropDownLisTId").append($("<option></option>").val(value.PKId).html(value.SubDesc));

here "SubDesc",PKId describes the value getting out of Database., u need to separate your value from dataset.

like image 179
Venki Avatar answered Sep 23 '22 16:09

Venki


function GetDropDownData() {
    $.ajax({
        type: "POST",
        url: "test.aspx/GetDropDownDataWM",
        data: '{name: "abc" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data.d)
                {
                    $.each(data.d, function (){
                        $(".myDropDownLisTId").append($("<option     />").val(this.KeyName).text(this.ValueName));
                    });
                },
        failure: function () {
            alert("Failed!");
        }
    });
}
like image 34
Chindu Krishna Avatar answered Sep 25 '22 16:09

Chindu Krishna