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?

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?

• javascript
• jquery

• 1 Could you explain what do you mean by "different screens" ? – VirtualTroll Commented Jan 10, 2013 at 22:48
• It's a jquery mobile app, the selects appear on dofferent screens, but they are in the same document. – Spadar Shut Commented Jan 10, 2013 at 22:49
• Although this is a solved problem, for those interested if the above was actually the issue, you'd get this site's namesake, whereas if it's a regular loop causing the issue it would just hang. – starbeamrainbowlabs Commented Jul 18, 2017 at 15:12

5 Answers 5

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
});

If you want to match option for option by index, not value, then do so as follows :

HTML :

<select class="synch">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<select class="synch">
  <option value="AA">AA</option>
  <option value="BB">BB</option>
  <option value="CC">CC</option>
</select>

javascript :

var $synch = $(".synch").on('change', function() {
  $synch.not(this).get(0).selectedIndex = this.selectedIndex;
});

DEMO

I can't see that recursion should be a problem. Even if changing a <select> programatically did fire the 'change' event (which it doesn't) then after the first synchronization, the two indexes (or values) would match and no further change would happen, nor need to happen. Therefore no change, no change event, and no recursion.

Try this:

var $selects=$('#select_1,#select_2').change(function(){
    $selects.not(this).val( $(this).val() );
})

DEMO http://jsfiddle.net/mGYGK/

$("#select1").change(function(){
  $("#select2").val($("#select1").val())
});
$("#select2").change(function(){
  $("#select1").val($("#select2").val())
});

You can view a live demo of this function here

In the change handler, update the other select only if its value is different, do nothing if the values match. This breaks recursion.