Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <select id="country" 
  data-text-field="country"
  data-value-field="country"
  data-bind="value: country, source: countries" data-role="dropdownlist" ></select>
  <select id="city" data-cascade-from="country" 
  data-text-field="name"
  data-value-field="name"
  data-bind="value: city, source:cities" data-role="dropdownlist"></select>
</body>
</html>
 
var countries = [ { country: "Spain" }, {country : "Bulgaria" } ];
    
var cities = [ { name: "Madrid", country: "Spain"} , { name: "Barcelona", country: "Spain" }, { name: "Sofia", country: "Bulgaria"}, { name: "Varna", country: "Bulgaria" } ];
var viewModel = kendo.observable({
  cities: cities,
  countries: countries,
  city: "Sofia",
  country: "Bulgaria"
});
kendo.bind(document.body, viewModel);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers