以編程方式將Kendo UI DropDownListFor（）設置爲.OptionLabel選擇

Question

如果我們有兩個Kendo UI DropDownListFor綁定到從Controller傳遞的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（Optionlabel值）爲：

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

    } 

或者，可以下拉的set text。如果你喜歡ajax綁定:)，你可以依次下拉refresh。