如何用jQuery判断动态填充下拉列表是否有值及解决验证异常

我有一个「City Offices」下拉列表，会根据「Country」下拉的选中值动态填充。用户选择Country后，通过Ajax调用ASP.Net MVC 4.8控制器的ActionMethod获取城市数据来填充这个下拉，但不是所有国家都有对应的城市办公室，所以下拉可能为空。

需求很明确：如果City Offices下拉为空，就不做必填验证；如果有选项，就必须选中一个。

遇到的问题 #

我试了下面的代码，但不管下拉有没有填充，if条件始终为true，一直弹出“has value.”提示：

$(document).ready(function () {
    $('#btnubmit').on("click", function () {
        if ($('#ddlStateList').has('option').length > 0)
        {
            alert("has value.");   
            if ($("#ddlStateList").val() === "") {
                $('#lbStateListError').show();
            }
            else 
            {
                $('#lbStateListError').hide();
            }
        }
    }
});

我的视图代码用Kendo DropDownList生成：

@(Html.Kendo().DropDownList()
    .Name("ddlStateList")
    .HtmlAttributes(new { @class = "form-control", style = "width:100%" })
    .DataValueField("StateName")
    .DataTextField("StateName")
    .AutoBind(false)
    .Events(e =>
    {
        e.Change("ddlchange");
    })
)

另外，我用这段代码获取选项长度时，就算下拉已经填充，也始终返回0：

var check = $('#ddlCityList option').length;
console.log(check);

解决方案 #

因为你用的是Kendo UI DropDownList，它是封装后的组件，直接用jQuery原生方法操作会有问题，得用Kendo提供的API来处理：

1. 正确判断下拉是否有选项
   用Kendo的dataSource.data().length获取实际加载的选项数量，这才是准确的数据源长度。

2. 修正后的提交验证逻辑

$(document).ready(function () {
    $('#btnubmit').on("click", function () {
        // 获取Kendo下拉组件实例
        var dropdown = $("#ddlStateList").data("kendoDropDownList");
        // 判断是否有可用选项
        var hasOptions = dropdown.dataSource.data().length > 0;

        if (hasOptions) {
            var selectedValue = dropdown.value();
            if (!selectedValue) {
                $('#lbStateListError').show();
            } else {
                $('#lbStateListError').hide();
            }
        } else {
            // 无选项时隐藏错误提示
            $('#lbStateListError').hide();
        }
    });
});

3. 问题根源说明

• Kendo DropDownList的DOM结构被封装，原生jQuery选择器无法直接准确获取内部option元素，默认初始化时可能存在空占位选项，导致has('option')判断始终为true。
• 你测试代码里的ID写错了：下拉ID是ddlStateList，但代码里用了ddlCityList，这也是返回0的直接原因。

额外优化建议 #

• 把验证逻辑绑定到表单的submit事件上，而非按钮的click事件，更符合表单验证的常规流程。
• 如果需要配合服务器端验证，可以在后端根据Country的选中值，动态设置ModelState的验证规则。

内容的提问来源于stack exchange，提问作者Jashvita