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

Question

I have a dropdown list of sellers. Currently, the first seller is selected. When a button is clicked, it does some processing, then needs to automatically select the next seller in the list. I found jQuery code that does this, but it is not updating the Knockout value. I think that is because I am not using Knockout to change the selected value.

HTML:

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

ViewModel:

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

And this is the jquery I found to select the next option in a dropdown:

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

But I think that last line of JQuery needs to be Knockout instead. But I don't know how or if is possible to do that in Knockout. Either way, I need the sellerID to be updated with the new seller's ID. Currently, it is always the first seller's ID.

Update: Here is the returned JSON from GetSellers:

{"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

can't you just set the selected item to the next one in the array on the click event. I put it in as an attribute but I'm sure you can get the next one in many ways. run the snippet below. select a country click process. it will process that country and set the select to the next country.

 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>