Passing Multiple parameters to Web Method using jQuery in ASP.NET C#

Question

i have bind drop down using WebMethod (Services) I have multiple drop down list and need to bind on mutully dependent to each other like cascading of dropdown list but while passing value for one selected vale its showing null while debugging on my web method

WebMethod:

 public static List<Company> GetCompanies(string CountryCode, string CompanyCode)
        {
            GetInitiatorList.MasterDataServiceClient oClient = new GetInitiatorList.MasterDataServiceClient();
            Almarai.GiveAway.GetInitiatorList.ALM_COMPANY_M[] initiatorsList = oClient.GetActiveCompanies(CountryCode, CompanyCode)                                                                                 List<Company> Companyes = new List<Company>();
            foreach (Almarai.GiveAway.GetInitiatorList.ALM_COMPANY_M company in initiatorsList)
            {
                Companyes.Add(new Company()
                {
                    CountryCode = company.CompanyCode,
                    CompanyName = company.CompanyName
                });
            }
            return Companyes;
        }

JQuery

 $('#ddlCountry').change(function (e) {

   var selectedCountry = $('#ddlCountry').val();
   $.ajax({
            type: "POST",
            url: "Header.aspx/GetCompanies",
            data: JSON.stringify({ CountryCode: selectedCountry, CompanyCode: 'SAU' }),
            dataType: "json",
            contentType: "application/json",
            success: function (res) {
            $.each(res.d, function (data, value) {
            $("#ddlCompany").append($("<option></option>").val(value.CompanyId).html(value.CompanyName));

            $('#ddlCompany').change(function (e) {

Aspx:

 <div class="col-md-8">
       <select id="ddlCountry">
          <option value="0">--Select Country--</option>
       </select>
 </div> 

Where i am doing wrong Please guide me

Answer 1

To get the currently selected value from dropdown:

$('#ddlCountry').val();

To get the currently selected text from dropdown:

$('#ddlCountry :selected').text();

You can check first your ajax call is working properly or not , by sending hard coded text by specifying like this in ajax call:

$.ajax({
    type: "POST",
    url: "Header.aspx/GetCompanies",
    data: JSON.stringify({ CountryCode: 'USA', CompanyCode: 'SAU' })
    ....

Then you can check are you assign dropdown values properly or not ? If you only want text not value then you can use as I have mentioned on top. I think it will solve your problem. Please let me know if it isn't.

============ Updated (after reading comments) ======================

I have created a sample demo based on your sample. As I don't have the service code as you have so it is very simple to give it a test to check either it is working or not or it will give me the same error as like yours.

What I have done for testing this may be look trivial to you but please check , it works for me and give me right result. here is screen shot of Route Config file , take a look at the red circle ( I have to change this for web method works)

Screen shot of chrome dev tools ( for Contact.aspx page here for simplicity)

And finally Contact.aspx -> GetCompanies web method break point hit screen shot , here i have modified method body for simplicity , just to check data binding is working or not.

So , it's work for me. Would you please check all of your step one by one and let me know. If it will help you then it will be my pleasure.