Question

I am using Asp.Net/C# , I need to fill a dropdownlist on change of another dropdownlist , I could have done it using SelectedIndexChanged event by setting AutoPostBack Property to True of the first dropdownlist , but I have a password textbox which gets cleared on postback , so that solution was not feasible.I decided to use jquery ajax to call my code behind method , but I am using this approach for the first time so I cant figure out how do I go about this.Here is what I have tried so far but it is not working for me.

$('#ddlDivisionName').change(function() {
        alert('j');
        $.ajax({
            type: "POST",
            url: "/CreateAccount/CreateAccount.aspx/BranchNameFill",
            data: "{'index':1}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function() {
                alert('ok');
            }
        })
        return false;
    });

[WebMethod]
        public static string BranchNameFill(int index)
        {

            ddlBranchName.Items.Clear();   
            IEnumerable<BRANCH> br;
            br = (from b in dt.BRANCHes
                  where b.DIVNO ==index
                  select b);
            for (int i = 0; i < br.Count(); i++)
            {
                ddlBranchName.Items.Add(br.ElementAt(i).NAME.Trim());
            }





        }

Answer 1

here is a simple example I hope it helps you somehow

   [WebMethod]
        public List<BRANCH> BranchNameFill(int index)

        {

             br = (from b in dt.BRANCHes
                      where b.DIVNO ==index
                      select b);


            return br.ToList();

        }

    ajax client 
    function getCars() {
        $.ajax({   
          type: "POST",
          url: "/CreateAccount/CreateAccount.aspx/BranchNameFill",       
          data: "{'index':1}",       
          contentType: "application/json; charset=utf-8",        
          dataType: "json",        
          success: function(response) {        
            var branches = response.d;
            $('dropdownlist').empty();  
            $.each(branch, function(index, branches) {     
              $('dropdownlist').append('<option value="' + branch.ID + '" >' + branch.NAME + '</option>');

            });

          },

          failure: function(msg) {



          }

        });

      }

    </script>