使用KnockoutJS中的选项绑定为下拉列表中的某些选项添加类

Posted 2021-05-05

我正在阅读来自我的控制器中的呼叫的选项json。我将可观察数组绑定到我的下拉列表，它工作得很好。但是我想根据json中的一个变量为列表中的一些选项添加一个类。这是我的html选择：

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

这是我的淘汰赛：

在里面：

var groups = @Html.Raw( Json.Encode(ViewBag.GroupDetail.SellerGroup) );
sellerViewModel = new SellerViewModel(groups, "", 10);
ko.applyBindings(sellerViewModel, $("#studentInfo")[0]);

设置选项列表：

$(data.sellers).each(function(index, element) {
  sellerViewModel.sellers.push({Text: element.lastName + ", " + element.firstName, Value: element.sellerId})
});

在最后一段代码中，element有一个名为dateVerify的变量。如果dateVerify不为null，我想在选择列表中为该选项添加一个类，所以我可以为它添加不同的颜色。

答案

不确定它是否是最优雅的方式，但根据淘汰赛docs，有一个optionsAfterRender回调，允许您在添加选项后执行自定义操作。您可以使用jQuery / vanilla JS /无论如何添加所需的类。

optionsAfterRender: function(option, item) {
    if(!item.dateVerify) {
        $(option).addClass("some-class");
    }
}

显然，你需要修改它以更准确地适合你的代码，但我认为这正是你正在寻找的。