javascript - 如何同步两个 SELECT 元素

Question

我想知道如何同步两个元素的值和文本。例如，

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

然后同步();看起来像……

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

知道我该怎么做吗？谢谢，马修

Answer 1

一种可能的方法:

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>

JS Fiddle demo .

或者，稍微修改和更新:

function sync() {

  // caching the changed element:
  let el = this;

  // retrieving the id of the element we should synchronise with
  // from the changed-element's data-syncwith custom attribute,
  // using document.getElementById() to retrieve that that element.
  document.getElementById( el.dataset.syncwith )
    // retrieving the <options of that element
    // and finding the <option> at the same index
    // as changed-element's selectedIndex (the index
    // of the selected <option> amongst the options
    // collection) and setting that <option> element's
    // selected property to true:
    .options[ el.selectedIndex ].selected = true;
}

// retrieving the element whose changes should be
// synchronised with another element:
var selectToSync = document.getElementById('box1');

// binding the snyc() function as the change event-handler:
selectToSync.addEventListener('change', sync);

function sync() {
  let el = this;
  document.getElementById(el.dataset.syncwith).options[el.selectedIndex].selected = true;
}

var selectToSync = document.getElementById('box1');
selectToSync.addEventListener('change', sync);

<select id="box1" data-syncwith="box2">
  <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>

JS Fiddle demo .

请注意，此方法确实假设 - 并且要求 - <option>元素顺序相同。

要更新与顺序无关的原始方法，请使用 ES6 方法(以及相同的 data-syncwith 自定义属性方法):

function sync() {
  // caching the changed element (since
  // we're using it twice):
  let el = this;

  // retrieving the id of the element to synchronise 'to' from 
  // the 'data-syncwith' custom attribute of the changed element,
  // and retrieving its <option> elements. Converting that
  // Array-like collection into an Array using Array.from():
  Array.from(document.getElementById(el.dataset.syncwith).options)
    // Iterating over the array of options using
    // Array.prototype.forEach(), and using an Arrow function to
    // pass the current <otpion> (as 'opt') setting that current
    // <option> element's selected property according to Boolean
    // returned by assessing whether the current option's value
    // is (exactly) equal to the value of the changed element:
    .forEach(opt => opt.selected = opt.value === el.value);
}

var selectToSync = document.getElementById('box1');
selectToSync.addEventListener('change', sync);

function sync() {
  let el = this;
  Array.from(document.getElementById(el.dataset.syncwith).options).forEach(opt => opt.selected = opt.value === el.value);
}

let selectToSync = document.getElementById('box1');
selectToSync.addEventListener('change', sync);

<select id="box1" data-syncwith="box2">
  <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="3">Three</option>
  <option value="2">Two</option>
</select>

JS Fiddle demo .

如果您查看代码段中的 HTML，您会发现我切换了 <option> 的位置第二个元素 <select>元素来证明 <option>在后一种方法中位置无关紧要。

引用资料:

• Array.from() .
• Array.prototype.forEach() .
• Arrow functions .
• document.getElementById() .
• EventTarget.addEventListener() .
• for loop .
• HTMLElement.dataset .
• HTMLSelectElement .
• let statement .
• var .