I have a dynamically created select option using a javascript function. the select object is
<select name="country" id="country">
</select>
when the js function is executed, the "country" object is
<select name="country" id="country">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
...
<option value="ID">Indonesia</option>
...
<option value="ZW">Zimbabwe</option>
</select>
and displaying "Indonesia" as default selected option. note : there is no selected="selected"
attribute in that option.
then I need to set selected="selected"
attribute to "Indonesia", and I use this
var country = document.getElementById("country");
country.options[country.options.selectedIndex].setAttribute("selected", "selected");
using firebug, I can see the "Indonesia" option is like this
<option value="ID" selected="selected">Indonesia</option>
but it fails in IE (tested in IE 8).
and then I have tried using jQuery
$( function() {
$("#country option:selected").attr("selected", "selected");
});
it fails both in FFX and IE.
I need the "Indonesia" option to have selected="selected"
attribute so when I click reset button, it will select "Indonesia" again.
changing the js function to dynamically create "country" options is not an option. the solution must work both in FFX and IE.
thank you
This question is related to
javascript
jquery
select
attributes
option
This works in FF, IE9
var x = document.getElementById("country").children[2];
x.setAttribute("selected", "selected");
You're overthinking it:
var country = document.getElementById("country");
country.options[country.options.selectedIndex].selected = true;
// Get <select> object
var sel = $('country');
// Loop through and look for value match, then break
for(i=0;i<sel.length;i++) { if(sel.value=="ID") { break; } }
// Select index
sel.options.selectedIndex = i;
Begitu loh.
To set the input option at run time try setting the 'checked' value. (even if it isn't a checkbox)
elem.checked=true;
Where elem is a reference to the option to be selected.
So for the above issue:
var country = document.getElementById("country");
country.options[country.options.selectedIndex].checked=true;
This works for me, even when the options are not wrapped in a .
If all of the tags share the same name, they should uncheck when the new one is checked.
The ideas on this page were helpful, yet as ever my scenario was different. So, in modal bootstrap / express node js / aws beanstalk, this worked for me:
var modal = $(this);
modal.find(".modal-body select#cJourney").val(vcJourney).attr("selected","selected");
Where my select ID = "cJourney"
and the drop down value was stored in variable: vcJourney
What you want to do is set the selectedIndex attribute of the select box.
country.options.selectedIndex = index_of_indonesia;
Changing the 'selected' attribute will generally not work in IE. If you really want the behavior you're describing, I suggest you write a custom javascript reset function to reset all the other values in the form to their default.
Instead of modifying the HTML itself, you should just set the value you want from the relative option element:
$(function() {
$("#country").val("ID");
});
In this case "ID" is the value of the option "Indonesia"
This should work.
$("#country [value='ID']").attr("selected","selected");
If you have function calls bound to the element just follow it with something like
$("#country").change();
So many wrong answers!
To specify the value that a form field should revert to upon resetting the form, use the following properties:
defaultChecked
<input>
control: defaultValue
defaultSelected
So, to specify the currently selected option as the default:
var country = document.getElementById("country");
country.options[country.selectedIndex].defaultSelected = true;
It may be a good idea to set the defaultSelected
value for every option, in case one had previously been set:
var country = document.getElementById("country");
for (var i = 0; i < country.options.length; i++) {
country.options[i].defaultSelected = i == country.selectedIndex;
}
Now, when the form is reset, the selected option will be the one you specified.
// get the OPTION we want selected
var $option = $('#SelectList').children('option[value="'+ id +'"]');
// and now set the option we want selected
$option.attr('selected', true);??
Realize this is an old question, but with the newer version of JQuery you can now do the following:
$("option[val=ID]").prop("selected",true);
This accomplishes the same thing as Box9's selected answer in one line.
To set value in JavaScript using set attribute , for selected option tag
var newvalue = 10;
var x = document.getElementById("optionid").selectedIndex;
document.getElementById("optionid")[x].setAttribute('value', newvalue);
HTMLOptionElement.defaultSelected = true; // JS
$('selector').prop({defaultSelected: true}); // jQuery
If the SELECT element is already added to the document (statically or dynamically), to set an option to Attribute-selected
and to make it survive a HTMLFormElement.reset()
- defaultSelected
is used:
const EL_country = document.querySelector('#country');_x000D_
EL_country.value = 'ID'; // Set SELECT value to 'ID' ("Indonesia")_x000D_
EL_country.options[EL_country.selectedIndex].defaultSelected = true; // Add Attribute selected to Option Element_x000D_
_x000D_
document.forms[0].reset(); // "Indonesia" is still selected
_x000D_
<form>_x000D_
<select name="country" id="country">_x000D_
<option value="AF">Afghanistan</option>_x000D_
<option value="AL">Albania</option>_x000D_
<option value="HR">Croatia</option>_x000D_
<option value="ID">Indonesia</option>_x000D_
<option value="ZW">Zimbabwe</option>_x000D_
</select>_x000D_
</form>
_x000D_
The above will also work if you build the options dynamically, and than (only afterwards) you want to set one option to be defaultSelected
.
const countries = {_x000D_
AF: 'Afghanistan',_x000D_
AL: 'Albania',_x000D_
HR: 'Croatia',_x000D_
ID: 'Indonesia',_x000D_
ZW: 'Zimbabwe',_x000D_
};_x000D_
_x000D_
const EL_country = document.querySelector('#country');_x000D_
_x000D_
// (Bad example. Ideally use .createDocumentFragment() and .appendChild() methods)_x000D_
EL_country.innerHTML = Object.keys(countries).reduce((str, key) => str += `<option value="${key}">${countries[key]}</option>`, ''); _x000D_
_x000D_
EL_country.value = 'ID';_x000D_
EL_country.options[EL_country.selectedIndex].defaultSelected = true;_x000D_
_x000D_
document.forms[0].reset(); // "Indonesia" is still selected
_x000D_
<form>_x000D_
<select name="country" id="country"></select>_x000D_
</form>
_x000D_
To make an option selected
while populating the SELECT Element, use the Option()
constructor MDN
var optionElementReference = new Option(text, value, defaultSelected, selected);
const countries = {_x000D_
AF: 'Afghanistan',_x000D_
AL: 'Albania',_x000D_
HR: 'Croatia',_x000D_
ID: 'Indonesia', // <<< make this one defaultSelected_x000D_
ZW: 'Zimbabwe',_x000D_
};_x000D_
_x000D_
const EL_country = document.querySelector('#country');_x000D_
const DF_options = document.createDocumentFragment();_x000D_
_x000D_
Object.keys(countries).forEach(key => {_x000D_
const isIndonesia = key === 'ID'; // Boolean_x000D_
DF_options.appendChild(new Option(countries[key], key, isIndonesia, isIndonesia))_x000D_
});_x000D_
_x000D_
EL_country.appendChild(DF_options);_x000D_
_x000D_
document.forms[0].reset(); // "Indonesia" is still selected
_x000D_
<form>_x000D_
<select name="country" id="country"></select>_x000D_
</form>
_x000D_
In the demo above Document.createDocumentFragment is used to prevent rendering elements inside the DOM in a loop. Instead, the fragment (containing all the Options) is appended to the Select only once.
Although some (older) browsers interpret the OPTION's selected
attribute as a "string" state, the WHATWG HTML Specifications html.spec.whatwg.org state that it should represent a Boolean selectedness
The selectedness of an option element is a boolean state, initially false. Except where otherwise specified, when the element is created, its selectedness must be set to true if the element has a selected attribute.
html.spec.whatwg.org - Option selectedness
one can correctly deduce that just the name selected
in <option value="foo" selected>
is enough to set a truthy state.
const EL_select = document.querySelector('#country');_x000D_
const TPL_options = `_x000D_
<option value="AF">Afghanistan</option>_x000D_
<option value="AL">Albania</option>_x000D_
<option value="HR">Croatia</option>_x000D_
<option value="ID">Indonesia</option>_x000D_
<option value="ZW">Zimbabwe</option>_x000D_
`;_x000D_
_x000D_
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver_x000D_
const mutationCB = (mutationsList, observer) => {_x000D_
mutationsList.forEach(mu => {_x000D_
const EL = mu.target;_x000D_
if (mu.type === 'attributes') {_x000D_
return console.log(`* Attribute ${mu.attributeName} Mutation. ${EL.value}(${EL.text})`);_x000D_
}_x000D_
});_x000D_
};_x000D_
_x000D_
// (PREPARE SOME TEST FUNCTIONS)_x000D_
_x000D_
const testOptionsSelectedByProperty = () => {_x000D_
const test = 'OPTION with Property selected:';_x000D_
try {_x000D_
const EL = [...EL_select.options].find(opt => opt.selected);_x000D_
console.log(`${test} ${EL.value}(${EL.text}) PropSelectedValue: ${EL.selected}`);_x000D_
} catch (e) {_x000D_
console.log(`${test} NOT FOUND!`);_x000D_
}_x000D_
} _x000D_
_x000D_
const testOptionsSelectedByAttribute = () => {_x000D_
const test = 'OPTION with Attribute selected:'_x000D_
try {_x000D_
const EL = [...EL_select.options].find(opt => opt.hasAttribute('selected'));_x000D_
console.log(`${test} ${EL.value}(${EL.text}) AttrSelectedValue: ${EL.getAttribute('selected')}`);_x000D_
} catch (e) {_x000D_
console.log(`${test} NOT FOUND!`);_x000D_
}_x000D_
} _x000D_
_x000D_
const testSelect = () => {_x000D_
console.log(`SELECT value:${EL_select.value} selectedIndex:${EL_select.selectedIndex}`);_x000D_
}_x000D_
_x000D_
const formReset = () => {_x000D_
EL_select.value = '';_x000D_
EL_select.innerHTML = TPL_options;_x000D_
// Attach MutationObserver to every Option to track if Attribute will change_x000D_
[...EL_select.options].forEach(EL_option => {_x000D_
const observer = new MutationObserver(mutationCB);_x000D_
observer.observe(EL_option, {attributes: true});_x000D_
});_x000D_
}_x000D_
_x000D_
// -----------_x000D_
// LET'S TEST! _x000D_
_x000D_
console.log('\n1. Set SELECT value');_x000D_
formReset();_x000D_
EL_select.value = 'AL'; // Constatation: MutationObserver did NOT triggered!!!!_x000D_
testOptionsSelectedByProperty();_x000D_
testOptionsSelectedByAttribute();_x000D_
testSelect();_x000D_
_x000D_
console.log('\n2. Set HTMLElement.setAttribute()');_x000D_
formReset();_x000D_
EL_select.options[2].setAttribute('selected', true); // MutationObserver triggers_x000D_
testOptionsSelectedByProperty();_x000D_
testOptionsSelectedByAttribute();_x000D_
testSelect();_x000D_
_x000D_
console.log('\n3. Set HTMLOptionElement.defaultSelected');_x000D_
formReset();_x000D_
EL_select.options[3].defaultSelected = true; // MutationObserver triggers_x000D_
testOptionsSelectedByProperty();_x000D_
testOptionsSelectedByAttribute();_x000D_
testSelect();_x000D_
_x000D_
console.log('\n4. Set SELECT value and HTMLOptionElement.defaultSelected');_x000D_
formReset();_x000D_
EL_select.value = 'ZW'_x000D_
EL_select.options[EL_select.selectedIndex].defaultSelected = true; // MutationObserver triggers_x000D_
testOptionsSelectedByProperty();_x000D_
testOptionsSelectedByAttribute();_x000D_
testSelect();_x000D_
_x000D_
/* END */_x000D_
console.log('\n*. Getting MutationObservers out from call-stack...');
_x000D_
<form>_x000D_
<select name="country" id="country"></select>_x000D_
</form>
_x000D_
Although the test 2. using .setAttribute()
seems at first the best solution since both the Element Property and Attribute are unison, it can lead to confusion, specially because .setAttribute
expects two parameters:
EL_select.options[1].setAttribute('selected', false);
// <option value="AL" selected="false"> // But still selected!
will actually make the option selected
Should one use .removeAttribute()
or perhaps .setAttribute('selected', ???)
to another value? Or should one read the state by using .getAttribute('selected')
or by using .hasAttribute('selected')
?
Instead test 3. (and 4.) using defaultSelected
gives the expected results:
selected
as a named Selectedness state. selected
on the Element Object, with a Boolean value. You could search all the option values until it finds the correct one.
var defaultVal = "Country";
$("#select").find("option").each(function () {
if ($(this).val() == defaultVal) {
$(this).prop("selected", "selected");
}
});
select = document.getElementById('selectId');
var opt = document.createElement('option');
opt.value = 'value';
opt.innerHTML = 'name';
opt.selected = true;
select.appendChild(opt);
I was trying something like this using the $(...).val()
function, but the function did not exist. It turns out that you can manually set the value the same way you do it for an <input>
:
// Set value to Indonesia ("ID"):
$('#country').value = 'ID'
...and it get's automatically updated in the select. Works on Firefox at least; you might want to try it out in the others.
Source: Stackoverflow.com