Knockout.js 敲除3级optgroup绑定

我试图绑定一个选择/列表框，其中有3个级别的数据，我希望我的输出如下所示

<select>
    <optgroup label="Root 1">
        <optgroup label="Group 1"> 
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </optgroup>
    </optgroup>
    <optgroup label="Root 2">
        <optgroup label="Group 2">
            <option>Option A</option>
            <option>Option B</option>
            <option>Option C</option>
        </optgroup>
    </optgroup>
</select>

这就是我试图绑定的方式

<div id="termdata">
    <select id="termsList" name="Term" data-bind="foreach: allterms">
        <optgroup data-bind="attr: { label: name}, foreach: termRoot">
            <optgroup data-bind="attr: { label: name},foreach: termGroup">
                <option data-bind="text: name"></option>
            </optgroup>                
        </optgroup>
    </select>
</div>

    var termData = [{
        "name": "Root 1", "termRoot": [{
            "name": "Group 1", "termGroup": [{
                "terms": [{
                    "name": "option 1"
                }, { "name": "option 2" }, { "name": "option 3" }]
            }]
        }]
    }, {
        "name": "Root 2", "termRoot": [{
            "name": "Group 2", "termGroup": [{
                "terms": [{
                    "name": "option A"
                }, { "name": "option B" }, { "name": "option C" }]
            }]
        }]
    }];

    var TermViewModel = function () {
        var self = this;
        self.allterms = ko.observableArray(termData);
    }

    ko.applyBindings(new TermViewModel(), document.querySelector('#termdata'));

我收到以下错误

消息：无法处理绑定foreach:function{returnterms} 消息：未定义术语

---

然而，在我看来，groupTerms上存在着无效的html循环语法，而且：嵌套的optgroups理论上是错误的，在呈现dom时会被展平。这一条应该有效：

<div id="termdata">
    <select id="termsList" name="Term" data-bind="foreach: allterms">
      <optgroup data-bind="attr: {label: name}"></optgroup>
      <!-- ko foreach: { data: termRoot, as: 'root' } -->
        <optgroup data-bind="attr: {label: root.name},
          foreach: { data: root.termGroup[0].terms, as: 'group' }">
          <option data-bind="text: group.name">ds</option>
        </optgroup>
      <!-- /ko -->
    </select>
</div>

---

请注意，termGroup是一个数组，所以理论上您也应该循环它。不过，我刚刚使用了第一个索引-root.termGroup[0].terms，而您正试图在语法中显示termGroup.name，因为-正如我所说-termGroup是一个数组。您能显示您的javascript吗？谢谢您的回复，我已经更新了这个问题。html似乎不支持嵌套超过1级的选项组。谢谢，是的，我知道，但我没有其他的解决方案，如果你看到我问题中的第一个例子嵌套optgroup工作，唯一的问题是淘汰不支持Hanks，我花了一整天的时间来实现它，但无法实现，我不知道我进一步节省了多少，