JSFiddle - React, Tailwind, and code Playground
HTML
<div class="formElement">
<label for="departments">Department:</label>
<input id="departments" value="1" />
</div>
<div class="formElement">
<label for="categories">Categories:</label>
<input id="categories" value="1" />
</div>
<div class="formElement">
<label for="subcats">Sub Category:</label>
<input id="subcats" value="1" />
</div>
JavaScript
var departmentSource,
categorySource,
subCategorySource;
enableKendoComboBoxes();
function enableKendoComboBoxes(){
var loadDeptID = $("#departments").val(),
loadCatID = $("#categories").val();
getDepartments();
getCategories(loadDeptID);
getSubCategories(loadCatID);
// Get Departments
function getDepartments() {
var departmentSource = [
{text: "Footwear", value:"1"},
{text: "Clothing", value:"2"},
{text: "Baby", value:"3"}
];
$("#departments").kendoComboBox({
placeholder: "Select department...",
dataTextField: "text",
dataValueField: "value",
dataSource: departmentSource,
change: function(e) {
var selectedDept = $("#departments").val();
$("#categories").data("kendoComboBox").value(null);
$("#subcats").kendoComboBox({
value: "Select sub category...",
enable: false
});
getCategories(selectedDept);
}
});
}
// Get Categories
function getCategories(selectedDept) {
var categorySource = [
{text: "category 1", value:"1"},
{text: "category 2", value:"2"},
{text: "category 3", value:"3"},
{text: "category 4", value:"4"},
{text: "category 5", value:"5"}
];
$("#categories").kendoComboBox({
placeholder: "Select category...",
dataTextField: "text",
dataValueField: "value",
dataSource: categorySource,
change: function(e) {
var categories = $("#categories").data("kendoComboBox"),
subcats = $("#subcats").data("kendoComboBox"),
selectedCategory = categories.dataItem().value;
...