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>

How to appear different dropdown group list on onChange of HTML <SELECT> tag

I am a novice in JavaScript and jQuery. I provide my HTML code below. I want to make two group of selection in my <SELECT> tags; e.g. Central and Northern. Both <SELECT> tag will have different sub list. For instance, Central will have A, B and C. While Northern will have 1, 2 and 3.
I have do try and error by putting JavaScript code in my HTML as below, unfortunately nothing change and I thing it have problem somewhere. Please help me by correcting my code. TQ
At First Step, user will click whether Central or Northern.
Then system are able to different between Central and Northern. Both should have different list group.
In my case below, it is error somewhere, should be only One dropdown.
My Code as below
<label>Region :</label>
<select class="custom-select form-control">
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<label>Node Pair :</label>
<select onchange="getCentral(this)">
<option value="">Select Central</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select onchange="getNorthern(this)">
<option value="">Select Northern</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Somthing like this with jquery should do the trick:
In your <head></head> section put this:
<style>
.subCat {
display: none;
}
</style>
And in your <body></body> replace your html for this:
<label>Region :</label>
<select id="selRegion" class="custom-select form-control">
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<label>Node Pair :</label>
<select id="selCentral" onchange="getCentral(this)" class="subCat">
<option value="">Select Central</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="selNorthern" onchange="getNorthern(this)" class="subCat">
<option value="">Select Northern</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
$(function() {
$("#selRegion").change(function() {
$(".subCat").hide();
var val = $(this).val();
if(val == "central") {
$("#selCentral").show();
} else if(val == "northern") {
$("#selNorthern").show();
}
});
});
</script>
Hope this helped.

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.

how to link category <option> tags

I want to link categories to their own pages. so I mean when I click to 'Hotels' it should open the page which is Category/Hotels
this is the current code
<select name="category">
<option value="">Any Category</option>
<option value="clubs">Clubs</option></a>
<option value="hotels">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>
lets say I want to link like that
<option value="www.website.com/event_cat/clubs/> Clubs </option>
<option value="www.website.com/event_cat/hotels/> Hotels </option>
.. and so on
but when I do, its directing to this page:
www.website.com/events/?time=&category=%2Fevent_cat%2Fclubs%2F&location=

JSfiddle Demo
<html>
<body>
<form name="blah_blah">
<select name="ddmenu_name" id="ddmenu_name" style="width: 80% !important;">
<option value="" selected>Select Site</option>
<option value="http://www.yahoo.com">Yahoo!!!</option>
<option value="http://www.gmail.com">Gmail</option>
<option value="http://www.google.co.in">Google</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
<input type="button" name="Submit" value="Go!" onClick="window.open(ddmenu_name.value,'newtab'+ddmenu_name.value)">
</form>
</body>
</html>

You just have to use full domain path with http or https(if its a secure server)
<option value="http://www.website.com/event_cat/clubs/> Clubs </option>
<option value="http://www.website.com/event_cat/hotels/> Hotels </option>

Since you have the first option already selected, in the first option, keep the value empty and add the onchange, as per the code below:
<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="">Any Category</option>
<option value="www.website.com/event_cat/clubs/">Clubs</option>
<option value="www.website.com/event_cat/hotels/">Hotels</option>
<option value="pubbar">Pub&Bar</option>
<option value="restaurants">Restaurants</option>
</select>