Hi all,
i want to enable second dropdown list only after selection of value from first dropdown.i have written the code as follows.
1st dropdown:-
<select id="sltStoneCategory" data-bind="options: StoneCategory, optionsValue: 'StoneCategoryID',optionsText: 'CategoryName', value: selectedCategory, select2: { selectOnBlur: true }, optionsCaption: 'Category'" style="width: 100px">
</select>
2nd dropdown:-
<select id="sltColor" style="width: 100px" data-bind="options: Color, optionsValue: 'StoneColorID',optionsText: 'ColorName', value: selectedColor, select2: { selectOnBlur: true }, optionsCaption: 'Color',enable: ColorDDlEnable,disable: ColorDDlDisable">
</select>
in the model i have written as follows
self.StoneCategory = ko.observableArray([]);
self.selectedCategory = ko.observable("");
$.ajax({
dataType: "JSON",
Type: "Get",
url: baseUri + 'api/StoneCategories',
success: function (data) {
self.StoneCategory.removeAll();
$.each(data, function (i, obj) {
var c = new StoneCategoryEntity(data[i]);
self.StoneCategory.push(c);
});
},
error: function (jqXHR, textStatus, errorThrown) {
$.jGrowl("Failed to get Details ." + errorThrown + ". " + "" + JSON.parse(jqXHR.responseText).Message + "." + "Please try again.",
{
theme: 'error'
});
}
});
self.ColorDDlDisable = ko.computed(function () {
return self.StoneCategory() != undefined;
});
self.selectedCategory.subscribe(function (newSubselectedCategoryId) {
if (newSubselectedCategoryId) {
//$("#sltColor").prop("disabled", false);
$.ajax({
dataType: "JSON",
Type: "Get",
url: baseUri + 'api/StoneCategories/?Id=' + newSubselectedCategoryId + '&userID=' + vrSupplierId,
success: function (data) {
self.Color.removeAll();
$.each(data, function (i, obj) {
var c = new StoneColorEntity(data[i]);
self.Color.push(c);
});
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Failed to get Details . </br>" + errorThrown + ". </br>" + "\n" + JSON.parse(jqXHR.responseText).Message + ". </br>" + "\nPlease try again.", true);
}
});
}
else {
//$("#sltColor").prop("disabled", true);
self.selectedColor(undefined);
}
});
self.ColorDDlEnable = ko.computed(function () {
return self.StoneCategory() == undefined;
});
but it is not working properly, plz help me to solve this!!!!!!!