This question already has answers here:
jQuery Loop through selects and set selected option
(3 answers)
Closed 6 years ago.
I'd like to loop through all of the select inputs on a page and if the selected value is not a certain option then set that value to selected
I have some selects (notice in select1, option 2 is selected)
<select name="select1">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
The idea here would be to have a checkbox that when it's checked set select2 and select3 to have option 2 selected as they don't have that option already selected and append a string to the value so I know they've been updated e.g '-updated'
I'm looping through them like so, but I can't figure out how to set the selected property to option '2' if it isn't already selected and then append '-updated' to the value
$('select').each(function() {
var selected = $(this).find(":selected");
if (selected.val() != 2) {
// set option 2 as selected
// append '-updated' to value
}
}
Fiddle https://jsfiddle.net/69zzr6xa/6/
var selected = 0;
$('select').each(function(i) {
var obj = $(this);
if(i == 0) selected = $(this).find(":selected");
if (obj.val() != 2) {
if (obj.val().indexOf('-updated') < 0) {
obj.val(selected.val());
obj.find(":selected").text(selected.text()+" -updated");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select name="select1">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<label>Set to two
<input type="checkbox" id="set_to_two" name="set_to_two">
</label>
Check below example.
Loop through the select elements
Check if the value is already selected, if not set the value.
Also added the code to change other dropdown's, when any one is changed
$(function() {
var setValue = "2";
/* Initialize the select's to base value */
$('select').each(function() {
$(this).val(setValue);
});
/* Change the values of select's when anyone of the select changes */
$('select').change(function() {
setValue = $(this).val();
$('select').each(function() {
$(this).val(setValue);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Related
Im populating the dropdown with the selected value like this,
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option selected="3">Three</option>
</select>
To access the selected option im using:
var myOption = $('#myselect option:selected').val()
Here myOption returns "Three" as the value. How do i get the value i.e "3" and not the text?
it should be like
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected >Three</option>
</select>
you write selected=3 its not correct attribute check below code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected>Three</option>
</select>
<script>
var myOption = $('#myselect option:selected').val();
alert(myOption);
</script>
You have to set value="3" and add additional property selected(just the tag as it is boolean in nature)
Try the below html code:
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected>Three</option>
</select>
$('#myselect option:selected').val() should give you "3"
<select >
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2" selected >Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
I have multiple select box like that for example in first select box 1 is already selected so if i change option value 1 to 2 then change the selected value to 1 in which select box 2 is already selected
i am doing like
function getval(sff,sel){
var selectval=[];
$("select > option:selected").each(function(e) {
if(sel.value==this.value){
alert(this.value);
$(this).find('option[value="2"]').prop('selected', true);
}
});
}
You need to select target option of select tag in change event listener of main select. So select relevant option of selects and add selected attribute to them.
$(".main").change(function(e) {
$(this).siblings("select").find("option[value='"+$(this).val()+"']").prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="main">
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2" selected >Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
I'm trying to create a dynamic dependent drop down lists. This code below work fine with 2 dependency and I’m trying to add a third dependency. Have you got any idea ?
For exemple :
Status 1 = offer 1, offer 2, offer 3 , offer 4
Offer 1 = Option 1
Thanks for your help
UPDATE 11.15.09
Finally find a solution
$("#street").val([]);
$('#street option').hide();
$("#city").on("change", function() {
$('#street option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#street").val([]);
})
$("#number").val([]);
$('#number option').hide();
$("#street").on("change", function() {
$('#number option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
<option value="1.A">Street A</option>
<option value="1.B">Street B</option>
<option value="1.C">Street C</option>
<option value="2.D">Street D</option>
<option value="2.E">Street E</option>
<option value="2.F">Street F</option>
<option value="3.G">Street G</option>
<option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
<option value="1.A">1</option>
<option value="1.B">2</option>
<option value="1.C">3</option>
<option value="2.D">4</option>
<option value="2.E">5</option>
</select>
I fixed the problem with javascript. (no need to use jQuery)
Please try to use updated code below.
HTML:
<div>
<select name="select1" id="select1">
<option value="1" data-sync="1">Status 1</option>
<option value="2" data-sync="2">Status 2</option>
</select>
</div>
<div>
<select name="select2" id="select2">
<option value="1">offer 1</option>
<option value="1">offer 2</option>
<option value="1">offer 3</option>
<option value="1">offer 4</option>
<option value="1">offer 5</option>
<option value="2">offer 6</option>
<option value="2">offer 7</option>
<option value="2">offer 8</option>
<option value="2">offer 9<option>
</select>
</div>
<div>
<select name="select3" id="select3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="1">option 3</option>
<option value="2">option 4</option>
</select>
</div>
Javascript:
document.getElementById("select1").onchange=function() {
document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();
Check the running code link below.
http://jsfiddle.net/f97u5nLa/33/
I have multiple select box with same options which are mutually exclusive .For example if select box A and select box B has option1 ,option2 and option 3 , Then if I select option1 for select box A, then it should not be available on select box B
My demonstration
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
$('.alert_type').change(function() {
var selected_value=$(this).val();
$(".alert_type option[value='" + selected_value + "']").not(this.selectedOptions[0]).hide();
});
But I want to make 1st option as exception i.e <option value="">Select below</option> as I need flexibility to revert all the option
You can see on fiddle below , if I select option1 from select box 1 ,"select below" from option 3 is also removed which I want to put in exception
Fiddle
https://jsfiddle.net/timus2001/rbuyk7na/3/
When I try with
$(".alert_type option").show();
to show all at first it is not mutually exclusive any more (see the picture)
Ok. let me see if I get you this time:
$('.alert_type').change(function() {
var selected_values = [],
iteration;
$(".alert_type option").show();
$(".alert_type").each(function(){
iteration = $(this).find('option:selected').val();
if ( iteration !== "" ) {
selected_values.push( iteration );
}
})
for ( var i = 0; i < selected_values.length; i++ ) {
$(".alert_type option[value='"+ selected_values[i] +"']").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
This is what you need:
$('select.alert_type').on('change keyup',function() {
var val = $(this).val();
$('select.alert_type option').prop('disabled',false);
$(this).siblings().find('option[value='+val+']').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
Good luck :D
I am new in JS and I need some help. I want my 2-nd selectto appear only if the first one is already chosen, the 3-th select to appear after the second choise is done and the submit button to appear after the third choise is done.Is it possible to do that using a loop ?
<style>
select{float:left}
#month,#day,input{display:none}
</style>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
<option value="">2016</option>
<option value="">2015</option>
<option value="">2014</option>
<option value="">2013</option>
<option value="">2012</option>
<option value="">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
<option value="">2007</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="">January</option>
<option value="">February</option>
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">August</option>
<option value="">September</option>
<option value="">October</option>
<option value="">November</option>
<option value="">December</option>
</select>
<select required id='day' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
<input type="submit" class='selectOption'>
</form>
function select(par) {
var i = 0;
var x = document.getElementsByClassName('selectOption');
if (par.selectedIndex !== "0" && i<x.length) {
x[i++].style.display = 'block';
}
}
</script>
you can achieve this by hiding all select but the first one on page load and displaying them one by one after selecting the previous select.
<select required id='month' class='selectOption hide' onchange='select(this)'>
<select required id='day' class='selectOption hide' onchange='select(this)'>
plunker : http://plnkr.co/edit/oKwq0q4IB5poKuUOa6oG?p=preview
Define your function like this.
function select(par) {
if (par.selectedIndex !== 0) {
par.nextElementSibling.className = "selectOption";
}
}