Kendo DropDownList

by Marko Keuschnig

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<select id="select-one" onchange="DDWorker.filter(this.options, this.selectedIndex)"> 
</select>
<select id="select-two"></select>

JavaScript

var DDWorker = (function() {
  var result = {
    filter: function(allOptions, selectedIndex) {
      alert(allOptions + "; " + selectedIndex);
    },
    test: function(message) {
      alert(message);
    }
  };
  return result;
})();

var dd1Data = [{
    id: 1,
    name: "DD1 - Record 1",
    corresponding: [{
        id: 3,
        name: "DD2 - Record 3"
      },
      {
        id: 4,
        name: "DD2 - Record 4"
      }
    ]
  },
  {
    id: 2,
    name: "DD1 - Record 2",
    corresponding: [{
      id: 3,
      name: "DD2 - Record 3"
    }]
  },
  {
    id: 3,
    name: "DD1 - Record 3",
    corresponding: [{
        id: 3,
        name: "DD2 - Record 3"
      },
      {
        id: 5,
        name: "DD2 - Record 5"
      }
    ]
  },
];

var dd2Data = [{
    id: 1,
    name: "DD2 - Record 1"
  },
  {
    id: 2,
    name: "DD2 - Record 2"
  },
  {
    id: 3,
    name: "DD2 - Record 3"
  },
  {
    id: 4,
    name: "DD2 - Record 4"
  },
  {
    id: 5,
    name: "DD2 - Record 5"
  }
];


$(document).ready(function() {
  $("#select-one").kendoDropDownList({
    dataSource: dd1Data,
    dataTextField: "name",
    dataValueField: "id",
    index: 1
  });
  $("#select-two").kendoDropDownList({
    dataSource: dd2Data,
    dataTextField: "name",
    dataValueField: "id",
    index: 1
  });
});