如何在淘汰赛js中从第一个下拉列表中选择值后启用第二个下拉列表 [英] how to enable second dropdown list after selection of value from first dropdown in knockout js

问题描述

大家好，

i只有在从第一个dropdown.i选择了值之后才启用第二个下拉列表。编写了如下代码。



第一次下拉： -

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;
            });

但它工作不正常，PLZ帮我解决这个问题!!!!!!!

but it is not working properly, plz help me to solve this!!!!!!!

推荐答案

.ajax（{
dataType： JSON，
类型： 获取，
url：baseUri + ' api / StoneCategories'，
成功：function（data）{

self.StoneCategory.removeAll（）;

.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）;

}）;

}，
错误：函数（jqXHR，textStatus，errorThrown）{

.each(data, function (i, obj) { var c = new StoneCategoryEntity(data[i]); self.StoneCategory.push(c); }); }, error: function (jqXHR, textStatus, errorThrown) {

.jGrowl（ 无法获取详细信息。 + errorThrown + 。 + + JSON.parse（jqXHR.responseText）.Message + 。 + 请再试一次。，
{
theme：' 错误'
}）;
}
}）;

.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) {
                    //

这篇关于如何在淘汰赛js中从第一个下拉列表中选择值后启用第二个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！