如何同步两个SELECT元素

本文介绍了如何同步两个SELECT元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想知道如何同步两个元素的值和文本。例如， < 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'）;}; < 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，您会看到我切换了第二个< 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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！