在jQuery Easyui组合窗口小部件中过滤值后，单击绑定丢失

Question

我有两个jQuery easyui combobox，其中我有一个项目列表。每个Combobox都有完全相同的项目列表。我要做的是，当我从第一个Combobox中选择一个项目时，我希望所选项目在第二个Combobox（反之亦然）上不可用。我通过使用jQuery的替换方法（）方法：

$('#old_element').replaceWith('#new_element');

可以从 demo 中看到的正常工作。但是我遇到的问题是，当用Commobox替换一个项目时，我无法再单击更换的项目。例如，如果您在ComboBox1中选择Java，则将从ComboBox2中删除Java（仅剩下Perl和Ruby），现在，如果您在ComboBox1中选择Ruby，它将用ComboBox2中的Ruby替换为ComboBox1的旧值（哪个是java），但是现在，如果您尝试单击ComboBox2中的Java，则它不起作用（我无法单击）。任何人都可以告诉我如何解决这种情况。当我将该列表中的元素替换为另一个元素时，似乎也有一些空的DIV添加到列表中。知道我该如何解决这些问题？

您可以在中查看代码

Answer 1

您正在做难得的方法。我将做出两个假设，以简单地解释如何在不拧紧您不应该使用的低级标记的情况下实现这一目标。

1. 将您的data从标记移动到JavaScript。

   var data = [
     { label: 'java', value: 'Java' },
     { label: 'perl', value: 'Perl' },
     { label: 'ruby', value: 'Ruby' }
   ];
   

2. 我会假设两个组合使用相同的data。

考虑到这一点，您可以使用data参数来初始化组合蛋白。并且，在onchange事件中，然后使用loadData方法过滤匹配中的匹配项。

$cb1.add($cb2).combobox({
    data: data,
    onChange: function(newValue) {
        var $cb = $cb1.is(this) ? $cb2 : $cb1;
        $cb.combobox("loadData", data.filter(function(e) {
            return e.label !== newValue;
        }));
    }
});

在此处查看。

---

更新

替代方案而无需修改HTML布局。

var $cb1 = $('#combobox1'), $cb2 = $('#combobox2');
$cb1.data("combobox-data", $cb1.combobox("getData"));
$cb2.data("combobox-data", $cb2.combobox("getData"));
$cb1.add($cb2).combobox({
  onChange: function(newValue) {
    var $cb = $cb1.is(this) ? $cb2 : $cb1;
    var data = $cb.data("combobox-data");
    $cb.combobox("loadData", data.filter(function(e) {
      return e.label !== newValue;
    }));
  }
});

您去那里。