Question

我有两个ajax调用。一个用于在第一个下拉列表中加载发布周期，另一个用于在第二个下拉列表中加载场景第二个下拉列表中的方案对应于第一个下拉列表中选择的值。我无法加载页面加载。我必须通过单击第一个下拉列表中的选项来选择值，然后才会加载第二个下拉列表中的选项。如何在页面加载时实现此功能，而不是通过手动选择或触发该事件..我不希望使用ko处理程序。提前谢谢你的帮助。

//load release cycles in first dropdown
self.pushReleaseCycles = function(releaseCycleUrl,scenarioNameUrl1,scenarioNameUrl2){
    $.ajax({
        url: sharepointScenarioListUrl + releaseCycleUrl,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            var items = data.d.results;
            items.forEach( function(item) { 
                if (self.release_cycles.indexOf(item.Release_x0020_Cycle) == -1) { 

                    self.release_cycles.push(item.Release_x0020_Cycle);
                }
            });

            self.selectedCycle.subscribe(function(value) {
                self.scenarios([]);
                        self.pushScenariosToDropdown(value,scenarioNameUrl1,scenarioNameUrl2);
            });
        },
        error: function (data) { 
            alert("ERROR in function pushReleaseCycles : " + data);console.log(data);
        }
    });
};

//load scenarios in second dropdown
self.pushScenariosToDropdown = function(value,scenarioNameUrl1,scenarioNameUrl2){
    $.ajax( {
        url: sharepointScenarioListUrl + scenarioNameUrl1 + value + scenarioNameUrl2,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            var items = data.d.results;
            items.forEach( function(item) { 
                self.scenarios.push(new ScenarioModel(item));
                console.log(data);
            });
            self.selectedScenario.subscribe(function(value) {
                dbName = ko.toJSON(value.title);
                jarFile1 = ko.toJSON(value.jar);
                fdMimoAvailable = ko.toJSON(value.fdmimo);
                self.setValues(dbName,jarFile1,fdMimoAvailable); 
            });
        },
        error: function (data) { 
            alert("ERROR in function pushScenariosToDropdown: " + data);console.log(data);
        }
    });
};

我的HTML：

<select id="dropdown" required class="form-control select2" data-bind="options: release_cycles,value:selectedCycle">
</select>

<select id="dropdown2" required="required" class="form-control select2" data-bind="options: scenarios, optionsText:'scenarioName',optionsCaption:'Please Select Scenario', value:selectedScenario,validationOptions: { errorElementClass:'input-validation-error' },selectedOptions: chosenScenario">
</select>

Answer 1

我处理这个问题的方法是改变从服务器中提取数据的方式。您需要根据页面的需要包含整个菜单结构。在我看来，拥有稍长的负载而不是波涛汹涌的体验会更好。这是一个嵌套菜单及其外观的示例。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: Dropdown1, optionsText: 'Name', value: SelectedItem1"></select>

<select data-bind="options: Dropdown2, optionsText: 'Name', value: SelectedItem2"></select>

＆＃13;

document.querySelector(".single-product .product-buybox-big .col-sm-6");

＆＃13;

Answer 2

如果您不想根据第一个选择框的值从服务器检索值，但想要加载整个数据集，那么只需加载所有选项的json对象对于第二个框，然后在第一个选择后解析。如果它是大量的数据，那将会影响性能。

在页面加载时订阅值

2 个答案: