Kendo UI DropDownList更改为触发事件 [英] Kendo UI DropDownList on change to trigger event

问题描述

我的目标是显示不同的搜索结果字段取决于用户的下拉选择。我已经尝试了这几种不同的方式，似乎没有任何工作。

有没有人有一个简单的jQuery片段，可以获得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 =searchboxclass =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
}，
 SelectListItem （）
 {
 Text =Customer，
 Value =2
}，
 SelectListItem（）
 {
 Text =Contact，
 Value =3
}，
 SelectListItem（）
 {
 Text =服务员工，
值=4
}，
新的SelectListItem（）
 {
 Text =Organization， 
 Value =5
}，
 SelectListItem（）
 {
 Text =Employee，
 Value =6
}，
新的SelectListItem（）
 {
 Text =其他，
 Value =7
} 
}）
 .Name（SearchType）
）
< / div> 
} 
  

解决方案

  .DataTextField（Text）
 .DataValueField（Value）
 .BindTo（new List< SelectListItem> 
 {
 New SelectListItem（）
 {
 Text =All，
 Value =1
}，
 SelectListItem ）
 {
 Text =Customer，
 Value =2
}，
 SelectListItem（）
 {
 Text = Contact，
 Value =3
}，
新的SelectListItem（）
 {
 Text =服务员工，
值=4
}，
新的SelectListItem（）
 {
 Text =Organization， 
 Value =5
}，
 SelectListItem（）
 {
 Text =Employee，
 Value =6
}，
新的SelectListItem（）
 {
 Text =其他，
 Value =7
} 
}）
 .Name（SearchType）
 .Events（e => e.Change（ OnSearchTypeChange））; 
 
< script type =text / javascript> 
函数OnSearchTypeChange（e）
 {
 //做任何你想做的事
} 
< / script> 
  

I'm using Kendo UI for the first time and am having some difficulty triggering a function on my Kendo dropdownlist change.

My goal here is to show different search fields depending on the user's drop down selection. I have tried this a few different ways, and nothing seems to work.

Does anyone have a simple jQuery snippet that would get the text of the Kendo UI dropdown?

My code is as follows:

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

解决方案

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

这篇关于Kendo UI DropDownList更改为触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！