javascript - 使用 OptGroup 选择框

Question

我目前正在开发一个应用程序，该应用程序有一个选择框，其中选项组与每个项目相关联。本质上，最终目标将是一个等同于以下内容的“选择框”:

买家(optgroup)

---

• 珍妮(可选)
• 约翰尼(可选)

卖家(optgroup)

---

• 梅根(可选)
• 马修(选项)

我当前的代码部分有效。它成功创建了组。如果我在选项中使用跨度而不是直接进行数据绑定(bind)，它会为每个项目生成一个空白记录。但是，它不会显示选项文本，如果我尝试将它直接绑定(bind)到选项，它将停止运行。

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

这是我当前代码的 fiddle :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>