使用基因剔除和對數據庫的AJAX調用填充下拉列表

Question

我有一個包含一些值的下拉列表。

根據選擇的值，我想用數據庫中的值填充第二個下拉列表。

我正在使用淘汰賽，並設置了AJAX查詢，以便將數據從數據庫中拉回到我的JavaScript代碼中。

每當我在第一個下拉列表中選擇一個項目時，如果我發出警報或登錄控制台，便可以看到第二個下拉列表的所有正確值。 一切正常，只要從第一個下拉列表中獲取選定的值，然后通過AJAX將其發送到數據庫，然后返回第二個下拉列表的值列表即可。

問題是第二個下拉列表沒有填充這些值。 我認為使用剔除進行數據綁定是一個相對簡單的修復，但是我不確定下一步該怎么做。

任何幫助表示贊賞。 謝謝！

self.getSomeValuesFromDb = function (url, valueToSendToDb) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: url,
            data: {
                valueToSendToDb: valueToSendToDb
            },
            success: function (response) {
                self.valueObsArray = ko.observableArray([]);
                self.selected_value = ko.observable();
                $.each(response, function (index, theValue) {
                    self.valueObsArray.push(response[index]);
                });
                alert(self.valueObsArray());
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log("There has been an error retrieving the values from the database.");
            }     
        });





<div class="form-group">
<label class="col-sm-3 col-md-3 control-label">DDL 2:</label>
<div class="col-sm-9 col-md-9" data-bind="with: $parent.popup.selected_valueDropDownList1">
<select class="form-control" data-bind="options: $root.getSomeValuesFromDb('/SomeValue/Test','theValue'), value: $root.valueObsArray, optionsCaption: 'Select a value'"></select></div></div>

Answer 1

從上面的代碼中，您只需要在valueObsArray之外初始化getSomeValuesFromDb 。 然后在getSomeValuesFromDb內部，您需要使用以下代碼將valueObsArray數組設置為空

valueObsArray([]);

它看起來像這樣：

self.valueObsArray = ko.observableArray([]);
self.getSomeValuesFromDb = function (url, valueToSendToDb) {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: url,
        data: {
            valueToSendToDb: valueToSendToDb
        },
        success: function (response) {
            self.valueObsArray([]);
            self.selected_value = ko.observable();
            $.each(response, function (index, theValue) {
                self.valueObsArray.push(response[index]);
            });
            alert(self.valueObsArray());
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log("There has been an error retrieving the values from the database.");
        }     
    });

否則，當從第一個下拉列表中選擇一個值時，也可以使用pureComputed進行ajax調用以獲取第二個下拉列表的值：

 var simpleListModel = function() { var self = this; self.firstOptions = ko.observable(["", "Apple", "Orange", "Mango"]); self.selectedFirstOption = ko.observable(""); self.secondOptions = ko.pureComputed(function() { if(self.selectedFirstOption() === "") return []; else { // do ajax call here var number = 0; return ko.utils.arrayMap(self.firstOptions(), function(item) { return self.selectedFirstOption() + number++; }); } }, this); }; ko.applyBindings(simpleListModel); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div> <select data-bind="options: firstOptions, value: selectedFirstOption"></select> </div> <div> <select data-bind="options: secondOptions"></select> </div>