Keep two <select>s in sync

Question

I have two <select>s in my app but on different screens. They have the same change handler attached to them and have the same values. When one changes the other should change its value accordingly.

The problem is when one is changed and I try to change the other, it will fire the change event on the first one and so on recursively.

So how do I change a select, but not fire a change event?

Answer 1

when I try to change the other, it will fire the change event on the first one and so on recursively.

Really? You must be doing something wrong then, usually changing the value does not fire the event. Just use

var bothselects = $("#first-select, #second-select");
bothselects.change(function(e) {
    bothselects.val(this.value); // "this" is the changed one

    // do whatever else you need to do
});