How to bind select with optgroup tag

[tgmdbm]

Hi

I was wondering if there was an easy way to data bind to a select box
with option groups?

Something like:

<select data-bind="options: list, optionsText: 'name', optionsValue:
'id', groupBy: 'category'" ></select>

var viewModel = {
list: [
{ id: 1, name: 'one', category: 'A' },
{ id: 2, name: 'two', category: 'A' },
{ id: 3, name: 'three', category: 'B' },
{ id: 4, name: 'four', category: 'C' },
{ id: 5, name: 'five', category: 'B' }
]
}

Should output:

<select>
<optgroup label="A">
<option value="1">one</option>
<option value="2">two</option>
</optgroup>
<optgroup label="B">
<option value="3">three</option>
<option value="5">five</option>
</optgroup>
<optgroup label="C">
<option value="4">four</option>
</optgroup>
</select>

Has anyone come across this before?

Cheers

James

[ricochet1k]

Here's an example: http://jsfiddle.net/HPhmB/3/