Question

我有一个带有一些值的下拉列表。

根据选择的值，我想用数据库中的值填充第二个下拉列表。

我正在使用knockout并设置了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>

使用knockout和对数据库

1 个答案: