Change the selected option of multiple dropdowns with a single trigger - javascript

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>

Related

How to add links to the list of cities?

there are dependent lists. How to add page links to cities?
<select name="country" id="country">
<option value="bra">Браpилия</option>
<option value="rus">Россия</option>
<option value="ind">Индия</option>
<option value="chn">Китай</option>
<option value="zaf">ЮАР</option>
</select>
https://jsfiddle.net/4tfmv601/
<select name="country" id="country" onchange="location = this.value;">
<option value="bra.php">a</option>
<option value="rus.php">b</option>
<option value="ind.php">c</option>
<option value="chn.php">d</option>
<option value="zaf.php">e</option>
</select>
You should create an event listener that listens to the country select for input.
This can be done as follows:
in JS:
country.setEventListener('change', selectCountry);
OR
country.onchange = selectCountry();
OR in plain HTML
<select onchange="selectCountry()" name="city" id="city">

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

change select option by javascript

i have problem in javascript
i make carwebsite
i need to achieve functionality as per the image
when I choose company in "make" select box,
it shows me all classes. Then I need to choose a "class" from second dropdown and it should show me all Models
now i get one code
<script type="text/javascript">
$(document).ready(function(){
$('.car').change(function()
{ getcar = $(this).val();
//console.log(getcar);
$('.subcar').hide();
$('.'+getcar).show();
}); });
// end DOM
</script>
this is select (make)
<select name="car" class="car">
<option value="0" SELECTED="SELECTED">--Choose--</option>
<option value="Acura">Acura</option>
<option value="Alfa_Romeo">Alfa Romeo</option>
<option value="Aston_Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Can_Am">Can Am</option>
<option value="Chery">Chery</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ducati">Ducati</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="GMC">GMC</option>
</select>
this is select (class)
<select name="branch_name" class="subcar Acura" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="CL">CL</option>
<option value="CSX">CSX</option>
<option value="EL">EL</option>
<option value="ILX">ILX</option>
<option value="ZDX">ZDX</option></select>
<select name="branch_name" class="subcar Alfa_Romeo" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="101">101</option>
<option value="156">156</option>
<option value="156CROSSWAGON">156CROSSWAGON</option>
<option value="Spider">Spider</option>
</select>
<select name="branch_name" class="subcar Aston_Martin" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="DB9">DB9</option>
<option value="Healey">Healey</option>
<option value="Vantage">Vantage</option>
</select>
how can i make third select
???

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>​

Categories