Synchronize two multiselect box, select by value

I am new to JS and Jquery and I am using Eric Hynds jquery-ui-multiselect-widget

Here's a very good demo:

http://jsfiddle.net/PKypd/11/

In this demo the second select box has its values checked by position depending on which option was selected on the first select box.

The example also says that: "you can easily swap out .eq() for another .filter() to c开发者_如何学运维hoose checkboxes by value instead of their position."

But I haven't been able to do so and can not find any documentation on how to do it.

Could you guys help me do this? Just can't figure out how to do the .filter() condition to select the options on the second select box by its value. Thanks in advance.

EDIT:

Here's what I've done so far:

http://jsfiddle.net/PKypd/54/

In that example I set the same values for both select boxes. When I click on Canada I'm expecting to select bar on the second box, which has the same value, but it selects all the options. I feel that I'm missing something really simple but can't figure it out.

In your filter, this is your test:

return (ui.value == 'can');

ui refers to the checkbox in the first list that you had clicked. When you click the Canada checkbox, ui.value == 'can' will always be true.

This is what you want for your filter instead:

return this.value == ui.value;

This means to compare the current value of the item being inspected in the filter (this) with the value of the item that was clicked (ui).