0

I have two jQuery EasyUI Combobox in which I have a list of items. Each combobox has exactly the same list of items. What I'm trying to do is that when I select one item from the first combobox, I want the selected item to be unavailable on the second combobox (and vice versa). I did this by using the replaceWith() method of jQuery like:

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

That works fine as you can see from that DEMO. But the problem I have is that, when an item is replaced in a combobox, I can no longer click on the replaced item. For example, if you select Java in combobox1, Java will be removed from combobox2 (you're left with only Perl and Ruby), now if you select Ruby in combobox1, it will replace Ruby in combobox2 by the old value of combobox1 (which is Java), but now if you try to click on Java in combobox2, it does not work (I cannot click). Can anybody tell me how I can solve this situation. There seems to be also some empty divs that are added to the list when I replace an element from that list by another one. Any idea how can I resolve these issues please?

You can view the code in THAT DEMO

4

1 に答える 1

1

あなたはそれを難し​​い方法でやっています。簡単にするために、使用すべきではない低レベルのマークアップを台無しにすることなくそれを達成する方法を説明するために、2 つの仮定を立てます。

  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 に答える