Question

我有卖家的下拉列表。目前，第一个卖家被选中。单击按钮时，会执行一些处理，然后需要自动选择列表中的下一个卖家。我发现jQuery代码执行此操作，但它没有更新Knockout值。我认为那是因为我没有使用Knockout来改变选定的值。

HTML：

<select data-bind="value: sellerID, options: $root.sellers, optionsValue: 'Value', optionsText: 'Text', optionsCaption: ' -- select a student --'" class="form-control" id="sellerSelect"></select>

视图模型：

var SellerViewModel = function(groups) {
    var self = this;

    self.json = groups;
    self.groups = ko.computed(function() {
        var opts = [];
        for(var key in self.json)
        {
            if(self.json.hasOwnProperty(key))
            {
                opts.push({Text: self.json[key].majorGroup + " / " + self.json[key].minorGroup, Value: self.json[key].groupId});
            }
        }
        return opts;
    });

    self.roomID = ko.observable();
    self.roomID.subscribe(function(group) {
        if(group) {
            $.ajax({
                type: "GET",
                url: '@Url.Action( "GetSellers", "Tally" )',
                data: { groupId: group, contractId: $("#contractId").val()  },
                success: function (data) {
                    var opts = [];
                    for (var key in data.sellers) {
                        if (data.sellers.hasOwnProperty(key)) {
                            opts.push({Text: data.sellers[key], Value: key});
                        }
                    }
                    self.sellers(opts);
                    $("#sellerGroupId").val(group);
                }
            });
        }
    });

    self.sellers = ko.observableArray([]);
    self.hasSellers = ko.observable(false);
    self.sellerID = ko.observable();
    self.sellerID.subscribe(function(seller) {
        if(seller && verify == "True") {
            getVerifySeller(seller);
            easyGlanceModel.bigItemNo(null);
            easyGlanceModel.bigQty(null);
            tallyViewModel.highlightedRowIndex(null);
        }
    });

    self.phone = ko.observable();
    self.prize = ko.observable();
    self.firstName = ko.observable();
    self.lastName = ko.observable();
}

这是我发现在下拉列表中选择下一个选项的jquery：

$('#sellerSelect option:selected').next().attr('selected', 'selected');

但我认为JQuery的最后一行需要是Knockout。但是我不知道在Knockout中如何或者是否可以这样做。无论哪种方式，我都需要使用新卖家的ID更新卖家ID。目前，它始终是第一个卖家的ID。

更新以下是GetSellers返回的JSON：

{"sellers":{"1492":"MORGAN R","1493":"LYDIA P","1494":"MADISON G","1495":"TREYTON T","1496":"ZACH D","1497":"CAMERON P","1498":"REGAN R","1499":"EVELYN B"}}

Answer 1

您不能将所选项目设置为click事件中数组中的下一个项目。我把它作为一个属性，但我相信你可以在很多方面得到下一个。运行下面的代码段。选择国家/地区单击过程。它将处理该国家并将选择设置为下一个国家。

var Country = function(name, population, nextindex) {
  this.countryName = name;
  this.countryPopulation = population;
  this.nextindex = nextindex
};


function viewModel() {
  var self = this;
  this.availableCountries = ko.observableArray([
    new Country("UK", 65000000, 1),
    new Country("USA", 320000000, 2),
    new Country("Sweden", 29000000, 0)
  ]);

  this.selectedCountry = ko.observable('');
  this.click = function(value) {
    alert('you just processed ' + value.countryName)
    self.selectedCountry(self.availableCountries()[value.nextindex]);
  }

}


ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>
  Your country:
  <select data-bind="options: availableCountries,
                       optionsText: 'countryName',
                       value: selectedCountry,
                       optionsCaption: 'Choose...'"></select>
</p>

<div data-bind="with: selectedCountry">
  <!-- Appears when you select something -->
  You are processing <span data-bind="text: countryName"></span>.
  <button data-bind="click: $parent.click">Process</button>

KnockoutJS - 在下拉选择框中选择下一个选项

1 个答案: