在使用 optgroups 的 select 标签中使用 optionsCaption

Question

我正在尝试让我的 <select> 标签的 optionsCaption 起作用。

<select class="form-control" data-bind="foreach: Roles, value: SelectedRole, optionsCaption: 'Select...'">
    <optgroup data-bind="attr: {label: Group}, foreach: GroupRoles">
        <option data-bind="value: $data, text:Name"></option>
    </optgroup>
</select>

当我这样做时，optionsCaption 参数中给出的 Select... 没有显示在下拉列表中。我需要使用 optionsCaption，因为当我将 self.SelectedRole(null) 放入 .js 视图模型文件时，我想将 SelectedRole 设置回 Select...。

编辑

为了进一步说明，Select... 必须位于列表顶部的 optgroups 之外。我尝试在 <optgroup> 标签上方手动设置 <option> 标签，但在使用 self.SelectedRole(null)

时我无法选择它

Answer 1

所以我的理解似乎没有办法使用optionsCaption（如果你知道我没见过的方法，请随时回答，我会把它标记为答案！）

相反，我使用了解决方法。

<select class="form-control" data-bind="value: SelectedCrmRole">
    <option data-bind="value:''">Select...</option>
    <!-- ko foreach: CrmRoles -->
        <optgroup data-bind="attr:{label: Group}">
        <!-- ko foreach: GroupRoles -->
            <option data-bind="value: $data, text:Name"></option>
        <!-- /ko -->
        </optgroup>
    <!-- /ko -->
</select>

我在 <optgroup> 标签上方创建了一个单独的 <option>，文本设置为 Select...。据我了解，重要的部分是 data-bind="value: ''。现在，在视图模型中，当我使用 self.SelectedCrmRole(null); 时，它会知道这是 null/default 值，因为我想成为默认选项的空值。

它可能不是最好的解决方法，但它是必要的！希望这也能帮助遇到此问题的任何人。

在使用 optgroups 的 select 标签中使用 optionsCaption

Using optionsCaption in a select tag that uses optgroups

knockout.js