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',
            ]
        }
    ]
};

我希望它有所帮助。

Eric Hynd的多选 - 用于optgroup的数据绑定

1 个答案: