JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="example">
    <label>DropDown1</label>
    <input type="text" id="list1"
        data-role="dropdownlist"
        data-text-field="Name"
        data-value-field="Value"
        data-bind="source: locationAttributeOne, value: attributeOneValue, events: {change: onChange}" />
    
    <label>DropDown1</label>
    <input type="text" id="list2"
        data-role="dropdownlist" 
        data-text-field="Name"
        data-value-field="Value"
        disabled="disabled"
        data-bind="source: locationAttributeTwo, value: locationAttributeTwoValue" />
</div>

JavaScript

var viewModel = kendo.observable({
    locationAttributeOne: [
        {Name: "Item1", Value: 1},
        {Name: "Item2", Value: 2},
        {Name: "Item3", Value: 3},
        {Name: "Item4", Value: 4}
    ],
    locationAttributeTwo: [
        {Name: "Item1", Value: 1},
        {Name: "Item2", Value: 2},
        {Name: "Item3", Value: 3},
        {Name: "Item4", Value: 4}
    ],
    attributeOneValue: null,
    locationAttributeTwoValue: null,
    onChange: function(e) {
        var dropdown = e.sender,
            index = dropdown.selectedIndex;
        
        this.locationAttributeTwo.splice(index, 1);
        $("#list2").data("kendoDropDownList").enable(true);
    }
});

kendo.bind($("#example"), viewModel);