Change the selected option of multiple dropdowns with a single trigger

Question

I have multiple dropdowns in separate sections which represent different views of the same dataset similar to below. I want to change all of the dropdowns with any of the selections, but I can't find a working solution.

<select class="select">
   <option value="0" selected>Select an option</option>
   <option value="1">Foo</option>
   <option value="2">Bar</option>
</select>
<select class="select">
   <option value="0" selected>Select an option</option>
   <option value="1">Foo</option>
   <option value="2">Bar</option>
</select>
<select class="select">
   <option value="0" selected>Select an option</option>
   <option value="1">Foo</option>
   <option value="2">Bar</option>
</select>

Making any selection should change all of the others, but it needs to be a dynamic solution, I might have a high number of selects on a page!

I can't get much further than a class based change function, followed by a class based each function, I'm sure the answer is there but I've only found answers to similar questions which rely on a single "master" dropdown to trigger the events of the others.

Many thanks

Solution I've made a rookie mistake, most of the answers I already found that I thought should work, do work. I'm using a funny new framework on my front end, and it needs an additional event to fire to make the dropdown look like it was selected. The behavior of the dropdown was working exactly as expected all along.

How to avoid this rookie mistake I should fiddle my own work if I expect something is not working as it should (and before posting). I would have realized my error much faster.

Thank you for your help!

Answer 1

Simply you can get value and set it as below

 $(document).on('change', '.select', function(e){ var val = $(this).val(); $(".select").val(val); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select>

Answer 2

 $(function(){ $('.select').change(function(){ $('.select').val($(this).val()); }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select>

Answer 3

Use selectedIndex when dropown change like below. It's works even the class is different.

 $('select').change(function() { $('select').prop('selectedIndex', $(this)[0].selectedIndex); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select>

Answer 4

A vanilla javascript solution if you prefer it.

 var selects = document.getElementsByClassName('select'); Array.prototype.forEach.call(selects, function(elem) { elem.addEventListener('change', function() { Array.prototype.forEach.call(selects, function(elem) { elem.value = this.value; }.bind(this)); }); });

 <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select> <select class="select"> <option value="0" selected>Select an option</option> <option value="1">Foo</option> <option value="2">Bar</option> </select>