Question

我目前正在开发一个应用程序，其中包含一个选项框，其中包含与每个项目关联的选项组。从本质上讲，最终目标将是一个选择框＆＃39;相当于以下内容：

买家（optgroup）

Jenny（选项）
Johnny（选项）

卖家（optgroup）

梅根（选项）
马修（选项）

我目前的代码部分正常运作。它成功创建了组。如果我在选项中使用span而不是直接使用数据绑定，则会为每个项目生成一个空白记录。但是，它不会显示选项文本，如果我尝试将其直接绑定到选项，它将停止运行。

您是否可以查看我的代码并告诉我可能导致此问题的原因？

这是我当前代码的小提琴：http://jsfiddle.net/lkritchey/my3Kw/6/

以下是我的JavaScript代码和HTML的副本：

JavaScript的：

var UserGroup = function (group, users) {
    this.GroupName = group;
    this.Users = users;
};

var User = function (guid, fullName) {
    this.UserId = guid;
    this.FullName = fullName;
};

var userListViewModel = {
    groupList: ko.observableArray([]),
    singleUserList: ko.observableArray([])
};

function populateData() {
    var users1 = [new User(1, "Jenny"), new User(2, "Johnny")];
    var users2 = [new User(3, "Megan"), new User(4, "Matthew")];
    userListViewModel.groupList.push(
    new UserGroup("Buyers", users1));
    userListViewModel.groupList.push(
    new UserGroup("Sellers", users2));
}
populateData();
ko.applyBindings(userListViewModel);

HTML：

<div>
     <h2>List of users:</h2>

    <div data-bind="foreach: $root.groupList">
         <h4 data-bind="text: GroupName"></h4>

        <ul data-bind="foreach: Users">
            <li data-bind="text: UserId + '-' + FullName"></li>
        </ul>
    </div>
</div>
<div>
    <h2>Select a User</h2>
User:
    <select data-bind="foreach: $root.groupList">
        <optGroup data-bind="attr: {label: GroupName}, 
        foreach: User">
            <option> <span data-bind="text: FullName"></span>

            </option>
        </optGroup>
    </select>
</div>
<div>
     <h2>Select a User:</h2>
User:
    <select data-bind="foreach: $root.groupList">
        <optGroup data-bind="attr: {label: GroupName}, 
        foreach: User">
            <option data-bind="text: FullName, value: UserId"></option>
        </optGroup>
    </select>
</div>

Answer 1

您必须将User更改为Users：

<optGroup data-bind="attr: {label: GroupName}, foreach: Users">

此外，您必须意识到<option>元素不能包含任何其他元素。你必须留下来：

<option data-bind="text: FullName, value: UserId"></option>

选择Box with OptGroup

1 个答案: