javascript - How to synchronize two SELECT elements

Question

I was wondering how to synchronize the values and text of two elements. For instance,

<select id="box1" onchange="sync();">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="box2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

and then sync(); would look something like....

function sync()
{
box2.selected = box1.selected;
}

Any idea how I would do this? Thanks, Matthew

Answer 1

One possible approach:

function sync(el1, el2) {
    // if there is no el1 argument we quit here:
    if (!el1) {
        return false;
    }
    else {
        // caching the value of el1:
        var val = el1.value;

        // caching a reference to the element with
        // with which we should be synchronising values:
        var syncWith = document.getElementById(el2);

        // caching the <option> elements of that <select>:
        var options = syncWith.getElementsByTagName('option');

        // iterating over those <option> elements:
        for (var i = 0, len = options.length; i < len; i++) {

            // if the value of the current <option> is equal
            // to the value of the changed <select> element's
            // selected value:
            if (options[i].value == val) {

                // we set the current <option> as
                // as selected:
                options[i].selected = true;
            }
        }
    }
}

// caching the <select> element whose change event should
// be reacted-to:
var selectToSync = document.getElementById('box1');

// binding the onchange event using an anonymous function:
selectToSync.onchange = function(){

    // calling the function:
    sync(this,'box2');
};

function sync(el1, el2) {
  if (!el1) {
    return false;
  } else {
    var val = el1.value;
    var syncWith = document.getElementById(el2);
    var options = syncWith.getElementsByTagName('option');
    for (var i = 0, len = options.length; i < len; i++) {
      if (options[i].value == val) {
        options[i].selected = true;
      }
    }
  }
}

var selectToSync = document.getElementById('box1');
selectToSync.onchange = function() {
  sync(this, 'box2');
};

<select id="box1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select id="box2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>