Eric Hynd的optgroup的multiselect - databind

Question

我使用的是Eric Hynds设计的这个很酷的multiselect component。

我在我的页面中使用knockout拥有这个控件数据绑定。现在，我希望允许对控件中的数据进行分组。我认为我可以使用optgroup选项，如下所示：

        <select name="example3" class="multiselect" multiple="multiple" size="5">
    <optgroup label="Group One">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </optgroup>
    <optgroup label="Group Two">
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
        <option value="option7">Option 7</option>
    </optgroup>
    </select>

问题是，在我的数据中，optgroup本身应该是一些数据项。因为我想在这里面展示父子关系。

你知道如何通过数据绑定做到这一点吗？

Answer 1

您可以使用此视图：

<select class="fieldValue" data-bind="foreach: availables, value: selectedItem">
    <optgroup data-bind="attr: {label: groupName},  foreach: fields">
        <option data-bind="text: headerText, attr:{value: fieldId}"></option>
    </optgroup>
 </select>

使用这种视图模型：

var  vm  ={
    selectedItem:  ko.observable()
    availables :[
        {
            groupName : 'group1'
            fields :[
                fieldId: 0,
                headerText : 'option1',
            ]
        }
    ]
};

我希望它能帮上忙。