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

Answer 1

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.

1. Move your data from the markup to JavaScript.

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

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