Kendo UI DropDownList on change to trigger event

Posted 2023-05-07

【中文标题】Kendo UI DropDownList on change to trigger event

【英文标题】：

【发布时间】：2014-02-12 15:04:34

【问题描述】：

我是第一次使用 Kendo UI，在我的 Kendo 下拉列表更改中触发功能时遇到了一些困难。

我的目标是根据用户的下拉选择显示不同的搜索字段。我已经尝试了几种不同的方法，但似乎没有任何效果。

有没有人有一个简单的 jQuery sn-p 可以获取 Kendo UI 下拉列表的文本？

我的代码如下：

  <script>
    $(document).ready(function () 
        var a = $("div#searchbox span.k-input").text();
        console.log(a);
      $(a).change(function()
            $('.searchingfor').hide();
            $('#' + a).show();
        );
    );
</script>
 @using (html.BeginForm())
 
    <div id="searchbox" class="label">
        @Html.Label("Search")
        @Html.TextBox("QuickSearch", null, new  style = "width:91%", @class = "k-input" )
        <br />
        <br />
        @(Html.Kendo().DropDownList()
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .BindTo(new List<SelectListItem>()
                        
                            new SelectListItem()
                            
                                Text = "All",
                                Value = "1"
                            ,
                            new SelectListItem()
                            
                                Text = "Customer",
                                Value = "2"
                            ,
                            new SelectListItem()
                            
                                Text = "Contact",
                                Value = "3"
                            ,
                            new SelectListItem()
                            
                                Text = "Service Employee",
                                Value = "4"
                            ,
                            new SelectListItem()
                            
                                Text = "Organization",
                                Value = "5"
                            ,
                            new SelectListItem()
                            
                                Text = "Employee",
                                Value = "6"
                            ,
                            new SelectListItem()
                            
                                Text = "Other",
                                Value = "7"
                            
                        )
                   .Name("SearchType")
                    )
    </div>

【参考方案1】：

@(Html.Kendo().DropDownList()
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new List<SelectListItem>()
                    
                        new SelectListItem()
                        
                            Text = "All",
                            Value = "1"
                        ,
                        new SelectListItem()
                        
                            Text = "Customer",
                            Value = "2"
                        ,
                        new SelectListItem()
                        
                            Text = "Contact",
                            Value = "3"
                        ,
                        new SelectListItem()
                        
                            Text = "Service Employee",
                            Value = "4"
                        ,
                        new SelectListItem()
                        
                            Text = "Organization",
                            Value = "5"
                        ,
                        new SelectListItem()
                        
                            Text = "Employee",
                            Value = "6"
                        ,
                        new SelectListItem()
                        
                            Text = "Other",
                            Value = "7"
                        
                    )
               .Name("SearchType")
               .Events(e => e.Change("OnSearchTypeChange"));

<script type="text/javascript">
function OnSearchTypeChange(e)

 //Do whatever you want to do

</script>

【参考方案2】：

订阅 onSelect 事件，然后获取选中项文本。以下来自剑道演示网站。

    function onSelect(e) 
                    if ("kendoConsole" in window) 
                        var dataItem = this.dataItem(e.item.index());
                        kendoConsole.log("event :: select (" + dataItem.text + " : " + dataItem.value + ")" );
                    
                ;

【参考方案3】：

我使用 Kendo MVC，我的下拉列表代码是：

@(Html.Kendo()
    .DropDownListFor(p=> p.SelectedItem)
    .BindTo((List<SelectListItem>)ViewBag.SelectedListItems)
    .Events(p => p.Change("function(e)list_change(e);")
))

所以改变功能：

function personType_Change(e) 
    var item = $('#SelectedItem').data("kendoDropDownList");

    //use item.value() and write your own codes

也许可以帮助某人:)