0

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

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

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

您可以在THAT DEMO中查看代码

4

1 回答 1

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;
    }));
  }
});

你去吧。

于 2012-12-19T17:43:59.053 回答