Develop Reference

Set the default value in select list using jQuery

If I have only one option in my dropdownlist, I need to select this option as default. How can I do this using jQuery?

I think you are new to SO, the usual procedure here is to provide some code of your own efforts on the matter before posting. That said, this is simple JQuery:
Edit to fit new specifications:
if($("#select_id option").length == 2){ //if there are exactly 2 options in the select element
$("#select_id option:nth(1)").attr("selected",true); //take the second option (element 0) inside the element with id "select_id" and set the selected attribute.
} //I think we do not need an else if any other thing will select the first option by default
Anyway, first option should be selected by default.
<select id="select_id">
<option value=1>First option is selected by default</option>
</select>
<!--adding proof that it is selected-->
<script>
$(function(){
alert($("#select_id").val()); //this will alert 1, since is the value of my first option
});
</script>

How to set option attribute to "selected" dynamically and remove when other option is selected

Okay so please read on before marking it as duplicate:
First Part: I have a select list. I need to set dynamically whenever I select that particular option.
Second Part: Once this is done, whenever I select another option from the same select list, I want the previous option's selected attribute to be removed and set to the current one.
Note: I dont care about getting the value. I just want to set "selected" attribute since I will be using that for another purpose.
Eg. Currently I selected option- Jquery
<select>
<option selected="selected">Jquery</option>
<option>Java</option>
<option>JS</option>
</select>
So the next time I select- Java, the following should occur:
<select>
<option>Jquery</option>
<option>Java</option>
<option selected="selected">JS</option>
</select>
So I have tried the following which doesn't seem to work:
//First remove the previous set attribute
$('select').click(function() {
$(this).find('option:selected').removeAttr('selected');
});
//Set the newly selected option's attribute to selected
$('select').on('change', function() {
$("option:selected").attr('selected','selected');
});
How can I make this happen? Javascript/Jquery solution that can be used for any similar select and not specific to this one.

Use an attribute selector to remove the attribute
The :selected selector works based on selected property, not the attribute
$('select').change(function(e){
$(this).find('[selected]').removeAttr('selected')
$(this).find(':selected').attr('selected','selected')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option selected="selected">Jquery</option>
<option>Java</option>
<option>JS</option>
</select>

Wrong Assumption
Attribute/Properties as Defaults
At first I thought this question was trivial because I naturally assumed that any attribute/property bestowed on a tag would show up easily since its just something that confirms a "state" to which an element is obviously in (ex. a checkbox is checked by a user, so there's no need to use .setAttribute() on it so it has the checked attribute because it should already have it by default.)
My assumption was wrong, attributes like checked, selected, disabled, etc are on a tag to set an initial "state" by default. So these attributes/properties do not magically manifest when a user checks a checkbox or selects on <option> from a <select> element. The two most effective ways to handle these attribute/properties is to:
Plain JavaScript
Use set/get/remove/hasAttribute() method family.
jQuery
Use .prop()/.removeProp() method, do not use .attr()
Solution
The following section discusses important parts of the Demo that follows:
var s = sel.options[sel.selectedIndex];
There's two parts to this assignment:
This s a HTMLOptionsCollection which is similar to a NodeList of an array-like Object.
.options
The second half is a property that is unique to <select> and <option> tags:
.selectedIndex
On its own it returns an index number of the first selected <option> of a given <select>, but in combination with the formerly mentioned .options Object, we have a very formidable tool to access a <select>, locate the selected <option>, and retrieve it as a useful DOM Object instead of an index number.
The rest of the demo uses a for() loop, Array.prototype.push(), .setAttribute(), .removeAttribute(). Almost forgot that the jQuery function listened for a "change" event occuring on the <select>:
$('select').on('change', function(e) {...
Demo
Details are commented in the demo on every line
// Listen for change events on a <select>
var s = $('select').on('change', function(sel) {
// Empty array
var sArr = [];
// Dereferenced jQuery Object
var sel = $('select')[0];
// options HTMLCollection with a selectedIndex property
var s = sel.options[sel.selectedIndex];
// Total number of loops
var sL = sel.length;
// for() loop
for (let S = 0; S < sL; S++) {
// On each loop a selected attr is removed from each option
sel[S].removeAttribute('selected');
// The empty array is loaded with only the first 3 loops
if (S < 3) {
sArr.push(sel[S]);
}
}
// One option from the 3 in the short array gets a selected attr
s.setAttribute('selected', 'selected');
// Clear console
console.clear();
// Display selected option
console.log(s);
// Display all 3 options from the short array
console.log(sArr);
});
.as-console-row-code {
color: gold;
background: #000;
font-size: 21px;
}
.as-console-row {
color: gold;
background: #000;
max-width: 15px;
}
<select>
<option> jQuery </option>
<option> JavaScript </option>
<option> CSS </option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Selected attribute of select options is not updating automatically

I have multiple selects on my page, each has multiple options.
However, If I select an option then the attribute selected of the option is not updating. Shouldn't this happen automatically?!
Example:
<select id="browsers">
<option value="Firefox">Bing</option>
<option value="InternetExplorer" selected="selected">Internet Explorer</option>
<option value="Chrome">Chrome</option>
</select>
By inspecting the DOM with the developer console, you should see, that the selected attribute is not changing even after selecting another option.
However I found a workaround. To solve this issue we can use this code:
$(document).on("change","select",function() {
$("option[value=" + this.value + "]", this)
.attr("selected", true).siblings()
.removeAttr("selected")
});
Example:
$(document).on("change","select",function() {
$("option[value=" + this.value + "]", this)
.attr("selected", true).siblings()
.removeAttr("selected")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="browsers">
<option value="Firefox">Bing</option>
<option value="InternetExplorer" selected="selected">Internet Explorer</option>
<option value="Chrome">Chrome</option>
</select>
This works kind of. However, If I select another option than the default option, e.g. Chrome and reload the page, then the option Chrome is still selected even after reload, BUT the selected attribute still points to Internet Explorer!
Which is the best approach to solve this?
My idea is to run through all selects on $(document).ready() and select the option where the selected attribute points to.
But why does this all not happen automatically?
Is it a bug or a feature?

The selected attribute defines if an element should be selected on pageload. If you post a form with a select element, the chosen option will be the one posted, regardless of the initial selected element.
What do you need the selected-attribute for in your case?
Edit: Based on your comments I made a fiddle
Fiddle 1 https://jsfiddle.net/q3fpafov/1 selects like you want
Fiddle 2 https://jsfiddle.net/bge9bsa7/2/ only files available for a chosen language are shown
I hope it's somewhere along the lines of what you're looking for.
The reason for your option still being selected when you reload is browser based. But the selected-attribute does nothing for the usability of the option. Also, it won't change because you don't change the way the HTML-element itself is being rendered (at page load)

Note: selected="selected" is not necessary, simply selected attribute will work as well.
When present, select attribute specifies that an option in select should be pre-selected when the page loads.
Also, the pre-selected option will be displayed first in the drop-down list.
Those 2 should be only effects of the selected attribute.
Note the keywords - when the page loads. He is either there or not when a browser loads the page.
If you wanna make it dynamic you need to use JavaScript. What do you wanna achieve with this? Having attribute selected on the correct element when reloading page or programmatically select the correct element after the page has been loaded?
If you simply wanna make element selected there is easier way trough either value:
jQuery("#browsers[value='the value of the one you like']").attr('selected','selected');
Or by index (mind, indexes start at 0 not 1):
document.getElementById("browsers").selectedIndex = "2";

The problem before was, that after selecting an option and reloading the page, the option was remembered during page reload, even though the attribute selected pointed to another option.
I solved it by calling the function below everytime. The function finds out which is the truly selected option, even after page reload.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="downloadSelect" id="select_179">
<option value="-">Please select</option>
<option value="link_2748" selected="selected">Deutsch</option>
<option value="link_2749">Chinese</option>
</select>
<button onclick="return showSelectedOption('select_179');">Show Option Text</button>
<script>
function showSelectedOption(pSelectID)
{
var text;
$("#"+pSelectID)
.find("option")
.each(function(){
if ($(this).prop("selected")) {
text = $(this).text();
}
});
console.log(text);
}
</script>

You can check the value of the select when it changes to see what it has been changed to.
var select = document.getElementById('browsers');
select.addEventListener('change', function(e) {
localStorage.setItem('browser', this.value);
});
var browser = localStorage.getItem('browser');
if (browser) {
select.value = browser;
}
<select id="browsers">
<option value="Firefox">Firefox</option>
<option value="InternetExplorer" selected="selected">Internet Explorer</option>
<option value="Chrome">Chrome</option>
</select>
edit
So, I missed the part about storing the value so that it persists when the page is reloaded, and depending on the OP's use case, I would suggest using localStorage to save the value when it is changed, and to read from it when the page is reloaded.
I have edited the snippet to reflect this (code is simplified)

unexpected behaviour in option tag in HTML

I have the following code
<select id="part">
<option>noun</option>
<option>verb</option>
<option>adjective</option>
</select>
In the above code, I don't have any value attribute each option tag.
there is only text node.
when I access the option tag
$("#part").val(); I get what is selected in dropdown box. ie, "noun"
but when I access $("#part").text(), there is empty string.
but when I create, option tags dynamically in jquery for
<select id="part"></select>
using
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
Here the value is attribute is needed to get the option selected.
without value attribute, $("#part") is undefined.
can somebody explain the discrepancy here? of if my understanding is not correct. Thanks

Check here DEMO http://jsfiddle.net/yeyene/yH4Fb/
You need to get only the selected option text coz there are three options,
when you get $("#part").val(); you directly get the selected value (only one selected value). But when you get $("#part").text().. you are getting the text of the whole select text where you have three options and three types of text.
JQUERY
$(document).ready(function(){
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
$("#part").on('change', function() {
alert('Value is '+$(this).val());
var text = $("#part option:selected").text();
alert('Text is '+text);
});
});

$("#part").text() doesn't return nothing but it won't return what you expect (see this fiddle).
Explanation: text returns the text of the object strips out the html (see jQuery docs examples), so what you will be getting is the inner contents of the select after the html was stripped out.
If you want the text of the selected value, include the selected option in your jquery selector: i.e. $('#part option:selected').text() which uses the jQuery psuedo-selector (also in my fiddle).

How to select an <option> within a dropdown by value and assign the "selected" attribute to it?

For a dropdown list (<select>), at some point I need to find the option with a given value and assign the selected attribute to it.
e.g.:
<select id="font-size">
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
</select>
In the example above, how would I add the "selected='selected'" attribute to the option with the value 14?

This would do it:
$('#font-size').val(14);
NB: this sets the selected property on the required <option> element - the attribute represents the initital value of the dropdown when the page is first loaded.

If you need this to set the initial value when the page is loaded then use,
$(document).ready(function() {
$('#font-size').val(14);
});
or else if you want it the value of which user has selected after the loading use this,
$(document).ready(function() {
$('#font-size').change(function() {
alert($(this).val());
});
});

document.getElementById("font-size").value = "14";