ASP.net 中Jq动态添加easyui—combobox组件的数据绑定问题

Question

代码如下：

点击按钮添加一组combobox关联下拉框，但是在同时添加多组下拉框后再进行选择，会因为ID的自增而导致，点击第一组下拉框后查到的数据绑定到了最新添加的那组combobox下拉框上。应该怎么解决啊？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要解决这个问题，你需要确保在添加新的下拉框时更新数据绑定。这可以通过监听onSelect事件来实现。

首先，在你的HTML中为每个下拉框元素添加一个onSelect事件处理程序，当用户选择一个新的选项时触发它。然后，你可以使用jQuery的data()方法将新值设置为当前选中的下拉框的libId属性。

以下是修改后的代码示例：

$(document).ready(function() {
    // 获取所有下拉框元素
    var comboBoxes = $('input.easyui-combobox');

    // 添加下拉框的select事件
    comboBoxes.each(function(index, box) {
        $(box).bind("change", function(e) {
            // 获取当前选中的下拉框
            var selectedBox = $(this);

            // 获取选中的下拉框的libId
            var libId = selectedBox.data('lib-id');
            
            // 更新其他下拉框
            $(comboBoxes).each(function() {
                if ($(this).data('lib-id') === libId) {
                    // 设置其他下拉框的libId
                    $(this).data('lib-id', libId);
                    $(this).combobox('refresh'); // 刷新数据
                }
            });
        });
    });
});

在这个例子中，我们首先遍历所有的下拉框元素，并为它们添加了change事件。每当有下拉框发生变化（即用户选择了新的选项）时，我们就获取这个变化的下拉框，并将其libId属性设为当前选中的下拉框的libId。

然后，我们在循环中检查当前选中的下拉框是否与我们的目标下拉框匹配。如果是，我们就更新其libId属性，并刷新数据以反映这些更改。

这样，每次你添加新的下拉框并选择其中一个选项时，都会根据目标下拉框的libId属性来刷新所有相关的下拉框。