无法使用JQuery选择下拉值

如何解决无法使用JQuery选择下拉值

我想互相下拉列表，因为我必须将一个选定值（ID）传递给另一个下拉列表。我正在使用Web服务绑定下拉列表，并且已成功完成但无法相互投射。我尝试过这样，但是选择0时我在创建下拉列表时已通过硬编码

var o = { countrycode: $('#ddlCountry').val(),CompanyCode: '1000'};

我正在使用jQuery，并希望将一个下拉列表值传递给另一种Web方法，因此它基于第一个下拉列表进行绑定，但是我无法选择选定的下拉列表值，为什么？

jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">  
            $(document).ready(function () {
                
                
                $.ajax({
                    type: "POST",url: "Header.aspx/GetCountriesName",dataType: "json",contentType: "application/json",success: function (res) {
                        $.each(res.d,function (data,value) {
                            $("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));

                        });
                    }
                });


                $('#ddlCountry').change(function (e) {
                    BindCompanies();
                });
            });

            function BindCompanies() {
                var CompCode = $('#ddlCountry').val();
                var CountryCode = '1000';
                $.ajax({
                    type: "POST",data: JSON.stringify(CompCode,CountryCode),url: "Header.aspx/GetCompanies",value) {
                            $("#ddlCompany").append($("<option></option>").val(value.CompanyId).html(value.CompanyName));

                        });
                    }
                });
            }
</script>

DropDown：

<select id="ddlCountry">
    <option value="0">--Select Country--</option>
</select>
<select id="ddlCompany">
    <option value="0">--Select Company--</option>
</select>
<select id="ddlDevision">
     <option value="0">--Select Devision--</option>
</select>

WebMethod：(There i want to pass selected Countrycode and Companycode)

[WebMethod]
        public static List<Company> Getcompanies(string Countrycode,string Companycode)
        {
            GetinitiatorList.MasterDataServiceClient oClient = new GetinitiatorList.MasterDataServiceClient();
            Almarai.GiveAway.GetinitiatorList.ALM_COMPANY_M[] initiatorslist = oClient.GetCompanies(Countrycode,Companycode);
            //almarai.giveaway.getinitiatorlist.alm_company_m[] companymlist = initiatorslist.companies;
            List<Company> companyes = new List<Company>();
            foreach (Almarai.GiveAway.GetinitiatorList.ALM_COMPANY_M company in initiatorslist)
            {

                companyes.Add(new Company()
                {
                    CompanyCode = company.CompanyCode,CompanyName = company.CompanyName
                });
            }
            return companyes;
        }

我在哪里做错了，请引导我

Please see screen shots 1

解决方法

作为一般指标，您需要确保只订阅一次下拉列表的change事件。目前，您正在为ddlCountry的一次更改事件订阅一次第一个ajax调用中返回的每个单个项目

$.each(res.d,function (data,value) {
       $("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
       $('#ddlCountry').change(function (e) { // don't do this!

您的代码应该这样布置（用伪代码）：

inside document ready:
    subscribe change on ddlCountry:
           execute function to load ddlCompany
    subscribe change on ddlCompany:
           execute function to load ddlDivision
  
    execute initial ajax call to load ddlCountry

    function for loading ddlCompany using ajax

    function for loading ddlDivision using ajax

下面的示例演示了如何在更改下拉列表时读取动态添加的option的选定值。

var $country = $('#ddlCountry');
$country.on('change',function(){
  console.log($(this).val());
});

$country.append($('<option></option>').val(1).html("First"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddlCountry">
    <option value="0">--Select Country--</option>
</select>