使用带有knockout的optgroup + optionsCaption的SELECT似乎被忽略了

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＆lt;如果您只想在第一组之前显示标题，则为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/