We Keep Coding

dropdown selected option picks option in another dropdown

i am looking how to have it when i pick volvo option then the 740 is selected. i want to add other if statements but i cant not figure this out. if i pick saab i want it to select 240
I would like to use jquery or javascript
Thank you in advance. This is what i have and it does not work.
Below is the corrected code to change the drop downs.
<select id="myselect1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="myselectVolvo">
<option value="740">740</option>
<option value="940">940</option>
<option value="240">240</option>
<option value="340">340</option>
</select>
$('#myselect1').change(function(){
if($('#myselect1').val() == 'volvo'){
$('#myselectVolvo').val('940').trigger('change');}
else if($('#myselect1').val() == 'saab'){
$('#myselectVolvo').val('240').trigger('change'); }
//alert("The text has been changed.");}
//};
});

You have a typo in the last js code line.
#myselctVolvo should be #myselectVolvo
your condition in if is wrong you need to use $('#myselect1').val() == 'volvo'. You
missed .val() after jquery selector.

Select dropdown value by index using JQuery [duplicate]

If you know the Index, Value or Text. also if you don't have an ID for a direct reference.
This, this and this are all helpful answers.
Example markup
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>

A selector to get the middle option-element by value is
$('.selDiv option[value="SEL1"]')
For an index:
$('.selDiv option:eq(1)')
For a known text:
$('.selDiv option:contains("Selection 1")')
EDIT: As commented above the OP might have been after changing the selected item of the dropdown. In version 1.6 and higher the prop() method is recommended:
$('.selDiv option:eq(1)').prop('selected', true)
In older versions:
$('.selDiv option:eq(1)').attr('selected', 'selected')
EDIT2: after Ryan's comment. A match on "Selection 10" might be unwanted. I found no selector to match the full text, but a filter works:
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
EDIT3: Use caution with $(e).text() as it can contain a newline making the comparison fail. This happens when the options are implicitly closed (no </option> tag):
<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
:
</select>
If you simply use e.text any extra whitespace like the trailing newline will be removed, making the comparison more robust.

None of the methods above provided the solution I needed so I figured I would provide what worked for me.
$('#element option[value="no"]').attr("selected", "selected");

You can just use val() method:
$('select').val('the_value');

By value, what worked for me with jQuery 1.7 was the below code, try this:
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

There are a number of ways to do this, but the cleanest approach has been lost among the top answers and loads of arguments over val(). Also some methods changed as of jQuery 1.6, so this needs an update.
For the following examples I will assume the variable $select is a jQuery object pointing at the desired <select> tag, e.g. via the following:
var $select = $('.selDiv .opts');
Note 1 - use val() for value matches:
For value matching, using val() is far simpler than using an attribute selector: https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
The setter version of .val() is implemented on select tags by setting the selected property of a matching option with the same value, so works just fine on all modern browsers.
Note 2 - use prop('selected', true):
If you want to set the selected state of an option directly, you can use prop (not attr) with a boolean parameter (rather than the text value selected):
e.g. https://jsfiddle.net/yz7tu49b/
$option.prop('selected', true); // Will add selected="selected" to the tag
Note 3 - allow for unknown values:
If you use val() to select an <option>, but the val is not matched (might happen depending on the source of the values), then "nothing" is selected and $select.val() will return null.
So, for the example shown, and for the sake of robustness, you could use something like this https://jsfiddle.net/1250Ldqn/:
var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
$select.val("DEFAULT");
}
Note 4 - exact text match:
If you want to match by exact text, you can use a filter with function. e.g. https://jsfiddle.net/yz7tu49b/2/:
var $select = $('.selDiv .opts');
$select.children().filter(function(){
return this.text == "Selection 2";
}).prop('selected', true);
although if you may have extra whitespace you may want to add a trim to the check as in
return $.trim(this.text) == "some value to match";
Note 5 - match by index
If you want to match by index just index the children of the select e.g. https://jsfiddle.net/yz7tu49b/3/
var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;
Although I tend to avoid direct DOM properties in favour of jQuery nowadays, to future-proof code, so that could also be done as https://jsfiddle.net/yz7tu49b/5/:
var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);
Note 6 - use change() to fire the new selection
In all the above cases, the change event does not fire. This is by design so that you do not wind up with recursive change events.
To generate the change event, if required, just add a call to .change() to the jQuery select object. e.g. the very first simplest example becomes https://jsfiddle.net/yz7tu49b/7/
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
There are also plenty of other ways to find the elements using attribute selectors, like [value="SEL2"], but you have to remember attribute selectors are relatively slow compared to all these other options.

Using jquery-2.1.4, I found the following answer to work for me:
$('#MySelectionBox').val(123).change();
If you have a string value try the following:
$('#MySelectionBox').val("extra thing").change();
Other examples did not work for me so that's why I'm adding this answer.
I found the original answer at:
https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

Exactly it will work try this below methods
For normal select option
<script>
$(document).ready(function() {
$("#id").val('select value here');
});
</script>
For select 2 option trigger option need to use
<script>
$(document).ready(function() {
$("#id").val('select value here').trigger('change');
});
</script>

$(elem).find('option[value="' + value + '"]').attr("selected", "selected");

You could name the select and use this:
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
It should select the option you want.

Answering my own question for documentation. I'm sure there are other ways to accomplish this, but this works and this code is tested.
<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
$(function() {
$(".update").bind("click", // bind the click event to a div
function() {
var selectOption = $('.selDiv').children('.opts') ;
var _this = $(this).next().children(".opts") ;
$(selectOption).find("option[index='0']").attr("selected","selected");
// $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
// $(selectOption).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[value='DEFAULT']").attr("selected","selected");
// $(_this).find("option[text='Default']").attr("selected","selected");
// $(_this).find("option[index='0']").attr("selected","selected");
}); // END Bind
}); // End eventlistener
</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>
</body>
</html>

For setting select value with triggering selected:
$('select.opts').val('SEL1').change();
For setting option from a scope:
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();
This code use selector to find out the select object with condition, then change the selected attribute by attr().
Futher, I recommend to add change() event after setting attribute to selected, by doing this the code will close to changing select by user.

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");
// or
$('#select option[value="myValue"]').prop("selected",true).trigger("change");

Try this
you just use select field id instead of #id (ie.#select_name)
instead of option value use your select option value
<script>
$(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
});
</script>

I use this, when i know the index of the list.
$("#yourlist :nth(1)").prop("selected","selected").change();
This allows the list to change, and fire the change event.
The ":nth(n)" is counting from index 0

i'll go with:-
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

/* This will reset your select box with "-- Please Select --" */
<script>
$(document).ready(function() {
$("#gate option[value='']").prop('selected', true);
});
</script>

For Jquery chosen if you send the attribute to function and need to update-select option
$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

if you want to not use jQuery, you can use below code:
document.getElementById("mySelect").selectedIndex = "2";

The $('select').val('the_value'); looks the right solution and if you have data table rows then:
$row.find('#component').val('All');

Thanks for the question. Hope this piece of code will work for you.
var val = $("select.opts:visible option:selected ").val();

There are a few suggestions why you should use prop instead of attr. Definitely use prop as I've tested both and attr will give you weird results except for the simplest of cases.
I wanted a solution where selecting from an arbitrarily grouped select options automatically selected another select input on that same page. So for instance, if you have 2 dropdowns - one for countries, and the other for continents. In this scenario, selecting any country automatically selected that country's continent on the other continent dropdown.
$("#country").on("change", function() {
//get continent
var originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent correctly with prop
$('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);
});
$("#country2").on("change", function() {
//get continent
var originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent wrongly with attr
$('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form>
<h4 class="text-success">Props to the good stuff ;) </h4>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6">
<label>Conuntries</label>
<select class="custom-select country" id="country">
<option disabled selected>Select Country </option>
<option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
<option data-origin-region="Antartica" value="Antartica">Antartica</option>
<option data-origin-region="Australia" value="Australia">Australia</option>
<option data-origin-region="Europe" value="Austria">Austria</option>
<option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
<option data-origin-region="South America" value="Brazil">Brazil</option>
<option data-origin-region="Africa" value="Cameroon">Cameroon</option>
<option data-origin-region="North America" value="Canada">Canada</option>
<option data-origin-region="South America" value="Chile">Chile</option>
<option data-origin-region="Asia" value="China">China</option>
<option data-origin-region="South America" value="Ecuador">Ecuador</option>
<option data-origin-region="Australia" value="Fiji">Fiji</option>
<option data-origin-region="North America" value="Mexico">Mexico</option>
<option data-origin-region="Australia" value="New Zealand">New Zealand</option>
<option data-origin-region="Africa" value="Nigeria">Nigeria</option>
<option data-origin-region="Europe" value="Portugal">Portugal</option>
<option data-origin-region="Africa" value="Seychelles">Seychelles</option>
<option data-origin-region="North America" value="United States">United States</option>
<option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
</select>
</div>
<div class="form-group col-md-6 col-sm-6">
<label>Continent</label>
<select class="custom-select" id="continent">
<option disabled selected>Select Continent</option>
<option disabled value="Africa">Africa</option>
<option disabled value="Antartica">Antartica</option>
<option disabled value="Asia">Asia</option>
<option disabled value="Europe">Europe</option>
<option disabled value="North America">North America</option>
<option disabled value="Australia">Australia</option>
<option disabled value="South America">South America</option>
</select>
</div>
</div>
</form>
<hr>
<form>
<h4 class="text-danger"> Attributing the bad stuff to attr </h4>
<div class="form-row">
<div class="form-group col-md-6 col-sm-6">
<label>Conuntries</label>
<select class="custom-select country-2" id="country2">
<option disabled selected>Select Country </option>
<option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
<option data-origin-region="Antartica" value="Antartica">Antartica</option>
<option data-origin-region="Australia" value="Australia">Australia</option>
<option data-origin-region="Europe" value="Austria">Austria</option>
<option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
<option data-origin-region="South America" value="Brazil">Brazil</option>
<option data-origin-region="Africa" value="Cameroon">Cameroon</option>
<option data-origin-region="North America" value="Canada">Canada</option>
<option data-origin-region="South America" value="Chile">Chile</option>
<option data-origin-region="Asia" value="China">China</option>
<option data-origin-region="South America" value="Ecuador">Ecuador</option>
<option data-origin-region="Australia" value="Fiji">Fiji</option>
<option data-origin-region="North America" value="Mexico">Mexico</option>
<option data-origin-region="Australia" value="New Zealand">New Zealand</option>
<option data-origin-region="Africa" value="Nigeria">Nigeria</option>
<option data-origin-region="Europe" value="Portugal">Portugal</option>
<option data-origin-region="Africa" value="Seychelles">Seychelles</option>
<option data-origin-region="North America" value="United States">United States</option>
<option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
</select>
</div>
<div class="form-group col-md-6 col-sm-6">
<label>Continent</label>
<select class="custom-select" id="continent2">
<option disabled selected>Select Continent</option>
<option disabled value="Africa">Africa</option>
<option disabled value="Antartica">Antartica</option>
<option disabled value="Asia">Asia</option>
<option disabled value="Europe">Europe</option>
<option disabled value="North America">North America</option>
<option disabled value="Australia">Australia</option>
<option disabled value="South America">South America</option>
</select>
</div>
</div>
</form>
</div>
As seen in the code snippet, prop works correctly every time, but attr fails to select properly once the option has been selected once.
Keypoint: We're usually interested in the property of the attribute, so its safer to use prop over attr in most situations.

Select not displaying correct selected value after update

This is my select in html:
<select id="bgPosition">
<option value="left top" selected="selected">Left Top</option>
<option value="center top">Center Top</option>
..
</select>
On page load I need to update the selected value with another one, so I tried with .each .prop and this:
function setActiveOption(el,val){
$(el).find('option:selected').removeAttr('selected');
$(el).find('option[value="'+val+'"]').attr('selected','selected');
console.log('selected: '+$('#bgPosition').val())
}
All ok for other select boxes, but not for #bgPosition I think because values contains spaces.
selected attribute is in right place, but is displaying first option as selected
Any idea how can this be fixed?
I also tried with different jQuery libraries
UPDATE: This is my fiddle and how I am running functions.

Given your example fiddle, the only select element that doesn't respect the value you set is the middle one, #bgRepeat, and that's because by default you've got two option set with the selected attribute.
To fix the problem, only provide one option with the selected attribute.
That being said, a better solution would be to just use .val() as a setter on the select itself, which is a one-liner and therefore renders the setActiveOption() function redundant. Try this:
var template = [{
"mainBgImgPosition": "right bottom",
"mainBgImgRepeat": "no-repeat",
"mainBgImgSize": "cover"
}]
jQuery(function($) {
var Builder = {
initialized: false,
initialize: function() {
if (this.initialized)
return;
this.initialized = true;
$('#bgPosition').val(template[0].mainBgImgPosition);
$('#bgRepeat').val(template[0].mainBgImgRepeat);
$('#bgSize').val(template[0].mainBgImgSize);
}
}
Builder.initialize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="bgPosition" id="bgPosition">
<option value="left top" selected="selected">Left Top</option>
<option value="left center">Left Center</option>
<option value="left bottom">Left Bottom</option>
<option value="center top">Center Top</option>
<option value="center center">Center Center</option>
<option value="center bottom">Center Bottom</option>
<option value="right top">Right Top</option>
<option value="right center">Right Center</option>
<option value="right bottom">Right Bottom</option>
</select>
<select name="bgRepeat" id="bgRepeat">
<option value="repeat" selected="selected">Repeat All</option>
<option value="repeat-x">Repeat X</option>
<option value="repeat-y">Repeat Y</option>
<option value="no-repeat">No Repeat</option>
</select>
<select name="bgSize" id="bgSize">
<option value="auto" selected="selected">Auto</option>
<option value="cover">Cover</option>
</select>

i tried your code in a fiddle and it worked for me.
https://jsfiddle.net/b8t1yavu/
What are you passing into the function setActiveOption for el. It might now be working because of that. You could call the function in two ways.
setActiveOption('#bgPosition','center top')
OR
setActiveOption(bgPosition,'center top')
If you want it call it with the second method, you have to modify your code a bit. here is a fiddle for that https://jsfiddle.net/b8t1yavu/1/

I don't know how you call your function but it seemed to work fine when I run it in JSFiddle. You need to call your function with the id of the element as the first parameter and the FULL value of the option as the second parameter as HTML does not concider words as seperate values.
setActiveOption('#bgPosition', 'center'); // Does not work
setActiveOption('#bgPosition', 'center top'); // Works fine
https://jsfiddle.net/Youmy001/uyun2soo

HTML select option value

I have a select option :
<select>
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
Now what I want is that whatever option I select from the dropdown, the value in the select should always be "select".
Thanks.

you could try something like this:
<select id="yourselect">
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
<script>
var s = document.getElementById('yourselect');
s.onchange = function() {
s.selectedIndex = 0; // on change event always select the first option
}
</script>
Example Fiddle : http://jsfiddle.net/8geek/

Add an event listener for an onchange event, in that listener you set the currently selected option to Select dynamically

Like Jukka mentioned, it seems like you want a select element where all the choices have the same effect? However, you should at least store the the chosen option.
Maybe this is something you are looking for: http://jsfiddle.net/NfRRM/

Change href parameter using jQuery after select change

I need to change a couple of href parameters using jQuery and driven by two form select options. The below example works perfectly but is driven from a text input and having problems converting it to work with a select.
https://stackoverflow.com/a/6540265/460322
I know this shouldn't be too hard but I have a stinking cold and brain is like mush this morning!
My code so far that doesn't work:
$(window).load(function(){
function updateNameValue() {
$('#changelink').val($('#option1 option:selected').attr('href', function(i,a){
return a.replace( /(field16=)[a-z]+/ig, '$1'.target.value ));
});
});
$('#option1').change(updateNameValue);
updateNameValue();
});

I ended up using the following code:
function changeHref(){
arg1 = $('#o1').val();
arg2 = $('#o2').val();
if (!arg1)
arg1 = 'default1';
if (!arg2)
arg2 = 'default2';
link = "link.html?arg1=" + arg1 + "&arg2=" + arg2;
$('#updateLink').attr("href",link)
}
$('.linkUpdater').change(function(){
changeHref();
});
changeHref();
With this HTML:
<select class="linkUpdater" id="o1">
<option value="">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<select class="linkUpdater" id="o2">
<option value="">Select</option>
<option value="optionA">Option A</option>
<option value="optionB">Option B</option>
</select>
<a id="updateLink" href="link.html">Link</a>

EDIT: This should work - jsfiddle.net/9dGdC
First, set the value attribute of each option tag in the select field to the respective href value, as shown below.
<select>
<option value="www.example.com">Option 1</option>
</select>
Then, use this code :
$('select').change(function(){
$('.link').attr('href',$(this).val())
});
This will change the href attribute of the link!