How To Synchronize Two SELECT Elements

I was wondering how to synchronize the values and text of two elements. For instance, One Solution 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'); }; Copy 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'); };Copy <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>Copy 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); Copy function sync() { let el = this; document.getElementById(el.dataset.syncwith).options[el.selectedIndex].selected = true; } var selectToSync = document.getElementById('box1'); selectToSync.addEventListener('change', sync);Copy <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>Copy 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); Copy 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);Copy <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>Copy 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. Solution 2: In the Actual browsers you dont have to do to 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> Copy Jsfiddle DEMO Solution 3: 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; Copy Solution 4: With jQuery: Note: on method requires jQuery > 1.7 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); }); });Copy <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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Copy Share Post a Comment for "How To Synchronize Two SELECT Elements" Top Question Firefox, Chrome, Safari Have Grey Background For Mp4 Html5 Video Any video (that I can make) with a white background becomes… Red Border Still Appears On Inputs After Resetting An HTML 5 Form Firefox I have an HTML 5 form! Great, I'm excited! I decide to … Svg Animation And Firefox I'm struggle with SVG animation drawing, which is work … Form To Iframe Submission - How Do You Reset The Form After File Upload? I have a form that submits the results to an iframe. The su… How To Hide/show Tabs Using Jquery I have four tabs.On loading only the first tab is opened an… How To Save Html5 Geolocation Data To Python Django Admin? Is it possible to save the javascript html5 geolocation lat… How To Limit The Html Table Records In Each Page I am populating a table in my jsp which has more than 20 re… How To Display A Python String As Html In Jupyter Notebook In IPython notebook, I used to be able to display a python … How To Add Placeholder Field?

I've been trying to add placeholder in input type='…