All geek questions in one place

How to synchronize two SELECT elements

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 (); will look something like this.

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

Any idea how I would do this? Thanks Matthew

+6
source share
4 answers

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

 function sync() { // caching the changed element: let el = this; // retrieving the id of the element we should synchronise with // from the changed-element 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 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 assumes - and requires - that the <option> elements are in the same order.

To update the original approach when the order doesn't matter, use the ES6 approaches (the same 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 selected property according to Boolean // returned by assessing whether the current option 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 will see that I switched the positions of the <option> elements in the second <select> element to demonstrate that the position of the <option> doesn't matter in this last approach.

Literature:

+6
source

In real browsers you don’t have to do much ...

 <select id="box1" onchange="box2.value=this.value;"> <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>

Jsfiddle demo

+2
source

Without jQuery:

 for (var i=0; i<document.getElementById('box1').options.length; i++) if (document.getElementById('box1').options[i].selected) for (var j=0; j<document.getElementById('box2').options.length; j++) if (document.getElementById('box1').options[i].value == document.getElementById('box2').options[j].value) document.getElementById('box2').options[j].selected = true;
+1
source

With jQuery:

 <select name="first" id="first" autocomplete="off"> <option value="0">-- Select one option --</option> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option> <option value="5">Fifth</option> <option value="6">Sixth</option> </select> <select name="second" id="second" autocomplete="off"> <option value="0">-- Select one option --</option> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option> <option value="5">Fifth</option> <option value="6">Sixth</option> </select> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> jQuery(function($) { $('#first').on('change', function() { var sel = $('option:selected', this).val(); $('#second option').filter(function(index, el) { return el.value == sel; }).prop('selected', true); }); }); </script>

Note: on method requires jQuery > 1.7

0
source

Source: https://habr.com/ru/post/903989/

More articles:


All Articles