Click binding lost after filtering values in a jQuery EasyUI combobox widget

Question

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

Yes, but I can't really change the structure of the code, I have to keep the structure as it is. I'm gonna try with the method loadData of the combobox and see if that works — user765368, Dec 19 '12 at 19:43
You should make clear what you can actually change then. I will add an alternative without modifying the HTML markup, that's best you can find I bet — Alexander, Dec 19 '12 at 19:51

Alexander · Accepted Answer · 2012-12-19T19:52:59.603

You are doing it the hard way. I will make two assumptions for simplicity to explain how you can achieve that without screwing up the low level markup which you shouldn't be using.

Move your data from the markup to JavaScript.

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

I will assume both comboboxes use the same data.

With this into account you can use the data parameter to initialize the comboboxes. And, in the onchange event then filter out the matches in the partner combobox set the filtered content using the loadData method.

$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.

UPDATE

An alternative without modifying the HTML layout.

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.

How would you update this to make it work with more than 2 combobox — user765368, Dec 19 '12 at 23:21
@user765368, you just need to follow through `$cb2` to add a `$cbX` — Alexander, Dec 20 '12 at 09:05

Click binding lost after filtering values in a jQuery EasyUI combobox widget

1 Answers1

UPDATE