如何同步两个SELECT元素 [英] How to synchronize two SELECT elements

查看：72 发布时间：2018/6/14 19:54:28 javascript html

本文介绍了如何同步两个SELECT元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 < select id =box1onchange =sync（）;> 
< option value =1>一个< / option> 
< option value =2>两个< / option> 
< option value =3>三< / option> 
< / select> 
< select id =box2> 
< option value =1>一个< / option> 
< option value =2>两个< / option> 
< option value =3>三< / option> 
< / select>

然后sync（）; ...

  function sync（）
 {
 box2.selected = box1 .selected; 
}

任何想法我会怎么做？
谢谢，
马修

解决方案

 函数同步（el1，el2）{
 //如果没有el1参数，我们在这里退出：
 if（！el1）{
返回false; 
} 
 else {
 //缓存el1的值：
 var val = el1.value; 
 
 //使用
缓存对元素的引用//我们应该与之同步值：
 var syncWith = document.getElementById（el2）; 
 
 //缓存<选项> < select>的元素：
 var options = syncWith.getElementsByTagName（'option'）; 
 
 //遍历这些< option>元素：
 for（var i = 0，len = options.length; i< len; i ++）{
 
 //如果当前< option>等于
 //到改变的< select>元素的
 //选择的值：
 if（options [i] .value == val）{
 
 //我们设置当前< option> as 
 // as selected：
 options [i] .selected = true; 
} 
} 
} 
} 
 
 //缓存< select>元素的变化事件应该
 //被反应为：
 var selectToSync = document.getElementById（'box1'）; 
 
 //使用匿名函数绑定onchange事件：
 selectToSync.onchange = function（）{
 
 //调用函数：
 sync （这一点， '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'）;};

< pre class =snippet-code-html lang-html prettyprint-override> < select id =box1> < option value =1>一个< / option> < option value =2>两个< / option> < option value =3>三< / option>< / select>< select id =box2> < option value =1>一个< / option> < option value =2>两个< / option> < option value =3>三< / option>< / select>

JS Fiddle演示。

或者修改并更新：

 函数sync（）{
 
 //缓存已更改的元素：
 let el = this; 
 
 //检索元素的id，我们应该与
同步//从更改元素的数据syncwith自定义属性
 // //使用document.getElementById（）检索那个元素。 
 document.getElementById（el.dataset.syncwith）
 //检索该元素的<选项
 //并找到< option>在相同索引
 //处作为变化元素的selectedIndex（在选项
 // collection中选择的< option>的索引
 //）并设置< option>元素的
 //选择属性为true：
 .options [el.selectedIndex] .selected = true; 
} 
 
 //检索变化应该是
的元素//与另一个元素同步：
 var selectToSync = document.getElementById（'box1'）; 
 
 //绑定snyc（）函数作为更改事件处理程序：
 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 =box1data-syncwith =box2> ; < option value =1>一个< / option> < option value =2>两个< / option> < option value =3>三< / option>< / select>< select id =box2> < option value =1>一个< / option> < option value =2>两个< / option> < option value =3>三< / option>< / select>

JS Fiddle演示。

请注意，这种方法确实假设–和需要– < option> 元素的顺序是相同的。

要更新原始方法，是不相关的，使用ES6方法（和 data-syncwith 自定义属性方法）：

  function sync（）{
 //缓存已更改的元素（自
 //我们使用它两次）：
 let el = this; 
 
 //从
中检索元素的id以同步'to'//更改后元素的'data-syncwith'自定义属性
 //并检索其元素<选项>元素。使用Array.from（）将
 //类似数组的集合转换为数组：
 Array.from（document.getElementById（el.dataset.syncwith）.options）
 //迭代在使用
 // Array.prototype.forEach（）的选项数组上，并使用箭头函数
 //传递当前的< otpion> （如'opt'）设置当前
 //< option>元素的选定属性根据布尔
 //通过评估当前选项的值
 //是否（正好）等于变化元素的值来返回：
 .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 =box1data-syncwith =box2> < option value =1>一个< / option> < option value =2>两个< / option> < option value =3>三< / option>< / select>< select id =box2> < option value =1>一个< / option> < option value =3>三个< / option> < / option>< / option>< / select>< / code>< / pre>< / option> 
   JS Fiddle演示。
 
 
 如果您查看代码片段中的HTML，您会看到我切换了第二个<$ c $中< option> 元素的位置c>< select> 元素来证明< option> 位置在后一种方法中无关紧要。 b 
 $ b 
参考文献： 
 
 
 
    Array.from（） 。
 
    Array.prototype.forEach（） 。
 
   Ar行功能。
 
    document.getElementById（） 。 
 
   EventTarget.addEventListener（） 。 b $ b 
   for 循环。
 
    HTMLElement.dataset  。      HTMLSelectElement  。
 
    let 语句。
 
    var  。 
 
 
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
 解决方案 
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>





JS Fiddle demo.

Or, revised and updated somewhat:
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.

Note that this approach does assume – and requires – that the <option> elements are in the same order.

To update the original approach, where the order is irrelevant, using ES6 approaches (and the same data-syncwith custom attribute approach):
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.

If you look at the HTML in the Snippet you'll see that I switched the positions of <option> elements in the second <select> element to demonstrate that the <option> position doesn't matter in this latter approach.

References:


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


                        这篇关于如何同步两个SELECT元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

如何同步两个SELECT元素 [英] How to synchronize two SELECT elements

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何同步两个SELECT元素 [英] How to synchronize two SELECT elements

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭