<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential Studio for JavaScript : DropDownList - Json data Source</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
<link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel='nofollow' href="http://cdn.syncfusion.com/14.1.0.41/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="13.4.0.53/themes/web/default.css" rel="stylesheet" />
<link rel='nofollow' href="13.4.0.53/themes/web/default-responsive.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js" type="text/javascript"> </script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/14.1.0.41/js/web/ej.web.all.min.js" type="text/javascript" ></script>
<script src="13.4.0.53/scripts/web/properties.js" type="text/javascript"></script>
</head>
<body>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div class="frame">
<div class="control">
<div class="ctrllabel">Select a bike</div>
<input type="text" id="bikeList" />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var target;
$(function () {
// declaration
List = [
{ id: "1", text: "text1", value: "value" }, { id: "2", text: "text2", value: "value" }
];
$('#bikeList').ejDropDownList({
dataSource: List,
fields: { id: "id", text: "text", value: "value" },
selectedIndex: 1,
change: function (args)
{
document.write("Change event handler triggered.");
}
});
});
</script>
<style class="cssStyles">
.control {
margin-left: 20px;
}
.ctrllabel {
padding-bottom: 3px;
}
</style>
</body>
</html>
