We Keep Coding

Change the selected option of multiple dropdowns with a single trigger

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!

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>

$(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>

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>

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>

Auto select two options based on drop-down list

I have the following HTML code to select Salesman, State, and Office Number. What I want to be able to do is select the Salesman and have it auto select the State and Office Number for that person:
<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
<option value="" selected="selected"></option>
<option value="Tammy Sizemore">Tammy Sizemore</option>
<option value="Ron Jeffries">Ron Jeffries</option>
<option value="Tony Clark">Tony Clark</option>
<option value="Mark Sengala">Mark Sengala</option>
<option value="Judy Donato">Judy Donato</option>
<option value="Mary Porter">Mary Porter</option>
</select>
<label for="state">State: </label>
<select id="state" name="state">
<option value="" selected="selected"></option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Maine">Maine</option>
<option value="Ohio">Ohio</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="West Virginia">West Virginia</option>
</select>
<label for="number">Office Number: </label>
<select id="number" name="number">
<option value="" selected="selected"></option>
<option value="A219">A219</option>
<option value="A256">A256</option>
<option value="G019">G019</option>
<option value="G222">G222</option>
<option value="Q161">Q161</option>
<option value="Q341">Q341</option>
</select>
The problem I'm having is that it's a fairly complex decision process as to who belongs where. For example:
If I select 'Tammy Sizemore', I know she's in Kansas in office A256.
If I select 'Ron Jeffries', I know he's in Maine at office Q161.
I'm somewhat familiar with implementing jQuery or JavaScript. The page is being rendered by PHP. If it can be done in one of those, I'm fine. I just don't know how to implement this.
Is there an efficient way to do this?

Here's the work-around I came up with (in case someone else finds this handy):
When setting up the drop-down list, I combined the three elements (Name, State, and Office Number) into a single value but only showed the Salesman name.
<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
<option value="" selected="selected"></option>
<option value="Tammy Sizemore,Kansas,A256">Tammy Sizemore</option>
<option value="Ron Jeffries,Maine,Q161">Ron Jeffries</option>
<option value="Tony Clark,West Virginia,G019">Tony Clark</option>
<option value="Mark Sengala,Ohio,Q341">Mark Sengala</option>
<option value="Judy Donato,Iowa,A219">Judy Donato</option>
<option value="Mary Porter,Pennsylvania,G222">Mary Porter</option>
</select>
Then, when I needed to split them back into separate fields, I used explode.
$sr_agent = $_POST['salesman'];
$sa = explode(',', $sr_agent);
$agent_name = $sa[0];
$agent_state = $sa[1];
$agent_office = $sa[2];

I'd recommend not using the value attribute as you did in your work-around solution, as you're basically using the value attribute for something other than its intended use. You can use custom data attributes that are perfect for this...
// cache the state & office elements so we don't have to search the DOM every time
var $state = $("#state");
var $office = $("#office");
$("#salesman").on("change", function() {
// find the selected option
var $selected = $(this).find("option:selected");
// get the associated state and office...
var state = $selected.data("state");
var office = $selected.data("office");
// set the dropdowns
$state.val(state);
$office.val(office);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="saleman">Senior Agent: </label>
<select id="salesman" name="salesman">
<option value="" selected="selected"></option>
<option value="Tammy Sizemore" data-state="Kansas" data-office="A256">Tammy Sizemore</option>
<option value="Ron Jeffries" data-state="Maine" data-office="Q161">Ron Jeffries</option>
<option value="Tony Clark" data-state="West Virginia" data-office="G019">Tony Clark</option>
<option value="Mark Sengala" data-state="Ohio" data-office="Q341">Mark Sengala</option>
<option value="Judy Donato" data-state="Iowa" data-office="A219">Judy Donato</option>
<option value="Mary Porter" data-state="Pennsylvania" data-office="G222">Mary Porter</option>
</select>
<label for="state">State: </label>
<select id="state" name="state">
<option value="" selected="selected"></option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Maine">Maine</option>
<option value="Ohio">Ohio</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="West Virginia">West Virginia</option>
</select>
<label for="office">Office Number: </label>
<select id="office" name="office">
<option value="" selected="selected"></option>
<option value="A219">A219</option>
<option value="A256">A256</option>
<option value="G019">G019</option>
<option value="G222">G222</option>
<option value="Q161">Q161</option>
<option value="Q341">Q341</option>
</select>

dynamic drop down menu for labels

I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.

in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here

How to change Multiple dropdown with jquery json and php

Hello Guys i want to change state based upon the country and the city according to state.
<label>Country:</label><br/>
<select onchange="getval(this)">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="" id="">
<option value="">Select State</option>
<option value="india">Orissa</option>
<option value="india">Telangan</option>
<option value="america">USA</option>
<option value="america">California</option>
</select>
<select name="" id="">
<option value="">Select city</option>
<option value="orissa">Nal</option>
<option value="orissa">Mir</option>
<option value="Telangan">Hyd</option>
<option value="Telangan">Vija</option>
<option value="america">KRK</option>
<option value="america">MRK</option>
</select>
How to change state based on country. and afterthat change city based on state.
Thanks in advance.
Just i want look like this below link.
http://demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php/

What you need is easy to make, you only have to play with Ajax and onChange event in yours dropdowns:
<select id="idCountries" onchange="updateStatesByCountry()">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select id="idStates" onchange="updateCitiesByState()">
<option value="">Select State</option>
<option value="india">Orissa</option>
<option value="india">Telangan</option>
<option value="america">USA</option>
<option value="america">California</option>
</select>
...
In your JS code add the needed functions:
function updateStatesByCountry(){
console.log($('#idCountries').val());
//Here add Ajax logic to load a new dropdown with all states of the current country
//Your AJAX call should be something like this
$.get('/getStatesByCountry?country='+ $('#idCountries option:selected').val(), function(data){
$('#idStates').empty();
$('#idStates').append(data);
});
});
}
//Same logic for the next dropdowns.
And I highly recommend you read about AJAX before you write this code.

Changing window URL with drop down?

<form name="roomForm">
<select name="roomMenu"
onChange="window.location = this.roomForm.roomMenu.options[this.roomForm.roomMenu.selectedIndex].value">
<option value="">Choose ICU</option>
<option value="All">All</option>
<option value="/base/ICU5/example">ICU5</option>
<option value="/base/ICU6/example">ICU6</option>
<option value="/base/ICU7/example">ICU7</option>
</select>
</form>
Could someone point out why this piece of code is not working? It should redirect to another page when the drop down menu is changed.

Your code has extra ")" and this itself is select box. jsfiddle
<form name="roomForm">
<select name="roomMenu"
onChange="window.location = this.options[this.selectedIndex].value;">
<option value="">Choose ICU</option>
<option value="All">All</option>
<option value="/base/ICU5/example">ICU5</option>
<option value="/base/ICU6/example">ICU6</option>
<option value="/base/ICU7/example">ICU7</option>
</select>
</form>​