时间戳

首页 > 解决方案 > 无法使用 JQuery 选择下拉值

jquery - 无法使用 JQuery 选择下拉值

问题描述

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

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

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

查询：

<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",
                    dataType: "json",
                    contentType: "application/json",
                    success: function (res) {
                        $.each(res.d, function (data, value) {
                            $("#ddlCompany").append($("<option></option>").val(value.CompanyId).html(value.CompanyName));

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

落下：

<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>

网络方法：(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;
        }

我在哪里做错了请指导我

请看截图1

标签： jqueryasp.netdrop-down-menucascade

解决方案

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

$.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>

推荐阅读