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>