选择带有OptGroup的框

我目前正在开发一个应用程序，该应用程序具有与每个项目关联的选项组的选择框。从本质上讲，最终目标将是一个"选择框"，相当于以下内容:

买家(optgroup)

---

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

卖家(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>

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

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