Knockout JS：表格内下拉框的校验问题咨询

我来给你整理一个完全匹配需求的实现，包含动态表格、下拉数据填充、行数据同步、行增删以及保存校验功能：

HTML 结构 #

<div>
    <button data-bind="click: loadFirstDropdownData">获取数据</button>
    <button data-bind="click: addNewRow">添加行</button>
    <button data-bind="click: saveTableData">保存</button>

    <table border="1" style="margin-top:10px;">
        <thead>
            <tr>
                <th>下拉框1</th>
                <th>下拉框2</th>
                <th>文本列1</th>
                <th>文本列2</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: tableRows">
            <tr>
                <td>
                    <select data-bind="options: $parent.firstDropdownOptions, 
                                       optionsText: 'name', 
                                       optionsValue: 'id', 
                                       value: selectedFirstId,
                                       event: { change: $parent.onFirstDropdownChange }">
                    </select>
                </td>
                <td>
                    <select data-bind="options: secondDropdownOptions, 
                                       optionsText: 'label', 
                                       optionsValue: 'value', 
                                       value: selectedSecondValue">
                    </select>
                </td>
                <td><input type="text" data-bind="value: text1"></td>
                <td><input type="text" data-bind="value: text2"></td>
                <td><button data-bind="click: $parent.deleteRow">删除</button></td>
            </tr>
        </tbody>
    </table>
    <div data-bind="visible: saveError" style="color:red; margin-top:10px;">
        * 请确保所有行的下拉框都已选择
    </div>
</div>

ViewModel 逻辑 #

function TableRowViewModel() {
    var self = this;
    self.selectedFirstId = ko.observable('');
    self.selectedSecondValue = ko.observable('');
    self.secondDropdownOptions = ko.observableArray([]);
    self.text1 = ko.observable('');
    self.text2 = ko.observable('');
}

function MainViewModel() {
    var self = this;

    // 表格行数据数组
    self.tableRows = ko.observableArray([new TableRowViewModel()]);
    // 第一个下拉框的选项数据
    self.firstDropdownOptions = ko.observableArray([]);
    // 保存错误提示
    self.saveError = ko.observable(false);

    // 加载第一个下拉框的数据（模拟后端请求）
    self.loadFirstDropdownData = function() {
        // 这里替换成实际的接口请求逻辑
        var mockData = [
            { id: '1', name: '选项A', relatedSecondOptions: [{label: 'A子项1', value: 'a1'}, {label: 'A子项2', value: 'a2'}] },
            { id: '2', name: '选项B', relatedSecondOptions: [{label: 'B子项1', value: 'b1'}, {label: 'B子项2', value: 'b2'}] },
            { id: '3', name: '选项C', relatedSecondOptions: [{label: 'C子项1', value: 'c1'}, {label: 'C子项2', value: 'c2'}] }
        ];
        self.firstDropdownOptions(mockData);
    };

    // 添加新行
    self.addNewRow = function() {
        self.tableRows.push(new TableRowViewModel());
        self.saveError(false); // 清除错误提示
    };

    // 删除行
    self.deleteRow = function(row) {
        self.tableRows.remove(row);
    };

    // 第一个下拉框选择变化时，同步当前行的第二个下拉框数据
    self.onFirstDropdownChange = function(data, event) {
        var selectedItem = ko.utils.arrayFirst(self.firstDropdownOptions(), function(item) {
            return item.id === data.selectedFirstId();
        });
        if (selectedItem) {
            data.secondDropdownOptions(selectedItem.relatedSecondOptions);
            // 可选：清空第二个下拉框的选中值，避免残留旧数据
            data.selectedSecondValue('');
        }
    };

    // 保存前的校验与提交
    self.saveTableData = function() {
        self.saveError(false);
        var isValid = true;

        // 遍历所有行，检查两个下拉框是否都已选中
        self.tableRows().forEach(function(row) {
            if (!row.selectedFirstId() || !row.selectedSecondValue()) {
                isValid = false;
            }
        });

        if (!isValid) {
            self.saveError(true);
            return;
        }

        // 校验通过，提交数据（这里替换成实际的接口请求）
        var submitData = ko.toJS(self.tableRows());
        console.log('提交的数据：', submitData);
        alert('保存成功！');
    };
}

// 绑定ViewModel
ko.applyBindings(new MainViewModel());

关键功能说明 #

• 获取数据按钮：点击后模拟加载第一个下拉框的选项数据，你可以把mockData替换成实际的AJAX请求返回的数据
• 添加/删除行：通过tableRows数组的push和remove方法实现动态行管理
• 下拉选择同步：第一个下拉框选中时，会根据选中项的关联数据自动填充第二个下拉框的选项，同时清空之前的选中值避免混乱
• 保存校验：点击保存按钮时，会遍历所有表格行，检查两个下拉框是否都有选中值，若有未选中的则显示错误提示，阻止提交；校验通过后将数据转为JS对象，可直接用于接口提交

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