Question

我有两个jQuery EasyUI Combobox，其中有一个项目列表。每个组合框都有完全相同的项目列表。我想要做的是，当我从第一个组合框中选择一个项目时，我希望所选项目在第二个组合框中不可用（反之亦然）。我是通过使用jQuery的replaceWith()方法完成的，如：

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

从 DEMO可以看出，这很好。但我遇到的问题是，当一个项目在组合框中被替换时，我无法再点击被替换的项目。例如，如果你在combobox1中选择Java，那么Java将从combobox2中移除（你只剩下Perl和Ruby），现在如果你在combobox1中选择Ruby，它将用combobox1的旧值替换在combobox2中的Ruby（是Java），但现在如果你试图在combobox2中点击Java，它就不起作用（我无法点击）。任何人都可以告诉我如何解决这种情况。当我用另一个元素替换该列表中的元素时，似乎还有一些空div添加到列表中。我知道如何解决这些问题呢？

您可以在 THAT DEMO

中查看代码

Answer 1

你正在以艰难的方式去做。为了简单起见，我将做出两个假设来解释如何在不搞砸你不应该使用的低级别标记的情况下实现这一目标。

将您的data从标记移至JavaScript。

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

我将假设两个组合框使用相同的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;
        }));
    }
});

See it here.

更新

另一种不修改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;
    }));
  }
});

There you go.

在jQuery EasyUI组合框小部件中过滤值后，单击绑定丢失

1 个答案:

更新