Get Selected Text and Value from Kendo Dropdownlist on Change Event

From this code snippet you will learn how to get the text and value of the selected item in Kendo dropdownlist on Change event.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-header">
<h4 class="title">DropDownList</h4>
<input id="dropdownlist" style="width: 100%;" />
</div>
<script>
$(document).ready(function() {
function onChange() {
alert($("#dropdownlist").data("kendoDropDownList").text());
alert($("#dropdownlist").val())
};
var data = [{
text: "Item1",
value: "1"
}, {
text: "Item2",
value: "2"
}, {
text: "Item3",
value: "3"
}];
$("#dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
change: onChange,
});
});
</script>
</div>
</body>
</html>