如何在Knockout.js下拉选单中按状态为选项添加分组标题？

我来帮你搞定这个分组下拉框的问题～你遇到的核心问题是：原生HTML下拉选单必须用<optgroup>标签才能实现分组标题，而你之前的代码只是直接遍历所有费用生成<option>，自然不会显示分组效果。下面是具体的实现方案：

第一步：在ViewModel中创建分组后的计算属性 #

首先我们需要把已排序的fees数组按status分组，转换成「分组标题+对应费用列表」的结构。用Knockout的computed observable来实现最合适，这样当fees数据变化时，分组会自动更新：

// 假设你的ViewModel基础结构如下
function ViewModel() {
    var self = this;
    
    // 原有的费用observable数组（已按status排序）
    self.fees = ko.observableArray([
        { feesID: 1, description: 'test1', status: 'New' },
        { feesID: 2, description: 'test2', status: 'New' },
        { feesID: 3, description: 'test3', status: 'Old' },
        { feesID: 4, description: 'test4', status: 'Old' }
    ]);
    
    // 绑定选中费用ID的observable
    self.feeID = ko.observable();
    
    // 创建分组后的计算属性
    self.groupedFees = ko.computed(function() {
        var fees = self.fees();
        var groups = [];
        var currentStatus = null;
        
        fees.forEach(function(fee) {
            // 把status转成大写作为分组标题
            var statusUpper = fee.status.toUpperCase();
            // 遇到新的status就创建新分组
            if (statusUpper !== currentStatus) {
                currentStatus = statusUpper;
                groups.push({
                    title: currentStatus,
                    items: []
                });
            }
            // 将当前费用加入对应分组
            groups[groups.length - 1].items.push(fee);
        });
        
        return groups;
    });
}

ko.applyBindings(new ViewModel());

第二步：修改HTML的绑定结构 #

接下来在HTML中，通过foreach遍历分组后的groupedFees，每个分组用<optgroup>标签设置标题，再在分组内部遍历费用生成选项：

<select id="feesSelect" data-bind="value: feeID">
    <!-- 默认提示选项 -->
    <option value="">Choose Fee</option>
    <!-- 遍历所有分组 -->
    <!-- ko foreach: groupedFees -->
        <optgroup data-bind="attr: { label: title }">
            <!-- 遍历当前分组下的费用 -->
            <!-- ko foreach: items -->
                <option data-bind="value: feesID, text: description"></option>
            <!-- /ko -->
        </optgroup>
    <!-- /ko -->
</select>

为什么你之前的代码没生效？ #

你之前的代码直接用foreach: $root.fees()生成所有<option>，没有使用<optgroup>标签包裹同组选项——原生HTML下拉选单只有通过<optgroup>才能实现分组标题效果，Knockout也需要遵循这个DOM结构来绑定数据，所以之前的写法无法显示分组。

按照上面的方案，就能实现你想要的效果：NEW标题下显示test1、test2，OLD标题下显示test3、test4，同时选中的费用ID也能正确绑定到ViewModel的feeID属性上。

内容的提问来源于stack exchange，提问作者user3378165