Javascript Knockout.js更改<；选项>；使用'；选项'；结合

在选择列表上使用“选项”绑定时，是否可以更改选择列表选项元素的样式（使用“样式”或“css”绑定）？或者，这只能通过在选择列表上使用“foreach”并更改每个选项的样式来实现吗

我有以下代码：

<select id="components-select" size="4" name="components-select"
                        data-bind=" options: combinedComponents, 
                                    optionsText: 'displayName', 
                                    optionsValue: 'id', 
                                    value: chosenComponent"></select>

还是有我不知道的某种形式的Knockout.js魔法

---

谢谢

回答你的问题，是的，这是我认为最好的方式

使用代码

style:{color:isDefault（）==true？'black'：'red'}

可以将样式绑定（添加）到关联的DOM元素。在本例中，整个

标记。不是你想要的

标签。这就是为什么您的整个列表会改变颜色

---

查看以获取有关样式绑定的更多信息。

要扩展Thomas Wiersema的回答，您希望以每行为基础处理该问题的方法如下：

<select id="components-select" size="4" name="components-select"
                    data-bind="foreach: combinedComponents">
<option data-bind="value: id, text: displayName, style: {color: getColorFor.call(null, $data) }"></option>
</select>

如果您不确定

call

的功能，请查看

---

我希望这能有所帮助——如果我能详细说明，请告诉我

把已经说过的话加起来，我发现get的一个功能经常被忽略，在这些情况下非常方便：

$index

。例如，我正在制作一个列表，其中我希望列表中的第一个选项为黑色，其余选项为红色。因此，我可以修改您的第二个选项，如下所示：

或者，如果你想改变颜色，只需使用模数检查

---

尝试“optionsAfterRender”绑定，在本例中效果很好

var viewModel=function（）{
this.combinedComponents=ko.observableArray([{
displayName:'item1'，
id:1，
isDefault:正确
}, {
displayName:'item2'，
id:2，
isDefault:错误
}, {
displayName:'item3'，
id:3，
isDefault:正确
}]);
选项AfterRender=（选项，项目）=>{
applybindingstoode（选项，{style:{color:item.isDefault？'red'：'black'}}，item）；
};
该.chosenComponent=ko.可观察（1）；
}
应用绑定（新的viewModel（））

据我所知，没有任何魔法选项。默认的
选项
绑定处理程序只发出绝对必要的内容，以获得所需的语义。设置每个选项的颜色不是可配置的设置。您可以重写处理程序以添加这些选项。在呈现控件后是否可能设置样式？否KO
options
binding中对此没有直接支持。但是我认为你的第二个例子是使用手册
foreach
是解决这个问题的最简单的方法。如果你要做的事情不止一次，你最好创建自己的绑定处理程序，使用
options
作为指导，例如
optionsWithColor
，供任何寻找此选项的人使用，看看这个问题-
<select id="components-select" size="4" name="components-select"
                    data-bind="foreach: combinedComponents">
<option data-bind="value: id, text: displayName, style: {color: getColorFor.call(null, $data) }"></option>
</select>

vm.getColorFor = function(component) {
    return component.isDefault() === true ? 'black' : 'red';
}