jquery - 以编程方式默认 Kendo UI DropDownListFor() 为 .OptionLabel 选择

Question

如果我们有两个 Kendo UI DropDownListFor 绑定到从控制器传递的 MVC ViewModel 中的数据，如果用户在其中一个下拉列表中进行选择，我们如何将另一个默认为.OptionLabel("选择？

    @(Html.Kendo().DropDownListFor(m => m.Cat)
    .Name("CatsDropDownList")
    .BindTo(Model.Cats)
    .OptionLabel("- Cats -")
    .Events(e => e.Change("CatsDropdownChangeHandler"))
)

@(Html.Kendo().DropDownListFor(m => m.Dog)
    .Name("DogsDropDownList")
    .BindTo(Model.Dogs)
    .OptionLabel("- Dogs -")
    .Events(e => e.Change("DogsDropdownChangeHandler"))
)

function CatsDropdownChangeHandler() {
    //do something
}

function DogsDropdownChangeHandler() {
    //do something
}

Answer 1

请尝试使用以下代码片段。

<script type="text/javascript">
    function CatsDropdownChangeHandler() {
        //do something
        $("#DogsDropDownList").data("kendoDropDownList").value(null);
    }

    function DogsDropdownChangeHandler() {
        //do something
        $("#CatsDropDownList").data("kendoDropDownList").value(null);
    }

</script>

Answer 2

没有特定的 API 函数来设置OptionLabel，您可以简单地选择索引 0（选项标签值）为：

@section scripts{
    <script>

        function CatsDropdownChangeHandler(e) {

            var dropdownlist = $("#DogsDropDownList").data("kendoDropDownList");            
            dropdownlist.select(0);        
        }

        function DogsDropdownChangeHandler(e) {
            var dropdownlist = $("#CatsDropDownList").data("kendoDropDownList");
            dropdownlist.select(0);
        }        
    </script>

    }

或者，您可以设置下拉菜单的文本。如果您喜欢 ajax 绑定 :)，您可以依次刷新下拉列表。