Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:-

SQL
<select id="sltStoneCategory" data-bind="options: StoneCategory, optionsValue: 'StoneCategoryID',optionsText: 'CategoryName', value: selectedCategory, select2: { selectOnBlur: true }, optionsCaption: 'Category'" style="width: 100px">
                                                </select>




2nd dropdown:-
SQL
<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
SQL
self.StoneCategory = ko.observableArray([]);
            self.selectedCategory = ko.observable("");


PHP
$.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'
                                       });
                }
            });

SQL
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!!!!!!!
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900