knockout.js - 让我的 SELECT 与 optgroup + optionsCaption 与淘汰赛似乎被忽略

Question

我有一个使用我的 SELECT html 标记的 optgroup 的解决方案。

这是 SO 帖子：Construct a knockout SELECT with optgroup based on observableArray

现在我想在这个 SELECT 中允许一个空值。我尝试使用 optionsCaption：

<select data-bind="foreach: brands, optionsCaption: '  '">
    <optgroup data-bind="attr: {label: $data}, foreach: $parent.vehicles">
    <!-- ko if: Brand == $parent -->
        <option data-bind="text: Type"></option>
    <!-- /ko -->
    </optgroup>
</select>

但它不起作用：没有空选项。

任何想法？

谢谢。

Answer 1

如果您只想在第一组之前显示标题，您还可以将标题的可见性数据绑定到 $index < 1。

<select data-bind="foreach: brands">
    <option data-bind="visible: $index() < 1">Select vehicle</option>    
        <optgroup data-bind="attr: {label: $data}, foreach: $parent.vehicles">
        <!-- ko if: Brand == $parent -->
        <option data-bind="text: Type"></option>
        <!-- /ko -->
    </optgroup>
</select>

Answer 2

您只能将optionsCaption绑定与options绑定一起使用。由于您不使用它，因此您必须手动将空选项添加到选项列表中：

<select data-bind="foreach: brands">
     <option value=''>  </option>
    <optgroup data-bind="attr: {label: $data}, foreach: $parent.vehicles">
    <!-- ko if: Brand == $parent -->
        <option data-bind="text: Type"></option>
    <!-- /ko -->
    </optgroup>
</select>

这是一个工作小提琴：http: //jsfiddle.net/HPhmB/57/