How to add "selected" in a parameter attribute using Javascript or jQuery?

Question

Below is the code for the select option and generated using php from the database, and I'm trying to add selected="selected" to value="4" using jQuery or any javascript:

 <select id="countryselect" name="country"> <option value="1">Afghanistan</option> <option value="2">Albania</option> <option value="3">Algeria</option> <option value="4">Malaysia</option> <option value="5">Maldives</option> </select> 

I am trying to pass this post but still can't .. below is my current script:

 <script> localStorage.setItem("Select1", "Malaysia"); $('#countryselect').find('option').each(function(i,e){ if($(e).val() == localStorage.getItem("Select1")){ $('#countryselect').prop('selectedIndex',i); } }); </script> 

thanks.

Answer 1

localStorage.getItem("Select1") will return Malaysia, and $(e).val() will return 1.2 ... 5 in each loop. Thus, your condition will never be true. Use instead

 <script> localStorage.setItem("Select1", "4"); $('#countryselect').find('option').each(function(i,e){ if($(e).val() == localStorage.getItem("Select1")){ $('#countryselect').prop('selectedIndex',i); } }); </script> 

Answer 2

This should work simply, $("#countryselect").val('4')​

It will automatically set selected=selected

Demo: http://jsfiddle.net/muthkum/zYRkC/

Answer 3

The selected attribute is a boolean attribute; its presence sets the value of the associated DOM property to true . If the attribute is missing, the value of the selected property is false .

If the parameter has a selected attribute , then the first time the page is loaded or in the form in which the control is located, reset, this parameter will be selected.

If the property parameter is set to true , then this parameter will be selected. However, if the form is reset, the default option will be selected (i.e. the one that has the selected attribute , or the first option, or none).

To set the selected attribute (i.e. select the default option):

 var select = document.getElementById('countryselect'); var option; for (var i=0, i<select.options.length; i<iLen; i++) { option = select.options[i]; if (option.value == '4') { // or // if (option.text = 'Malaysia') { option.setAttribute('selected', true); // For a single select, the job done return; } } 

Please note that this may not make the parameter currently selected, it will simply add the selected attribute. To ensure that it is selected (if that is what is required), also set the selected property to true (see below).

Note that the second argument to setAttribute must be a string that is used to set the attribute value. However, the selected attribute does not have a “custom” value, so the second argument is ignored (for example, even false still sets the attribute and makes the default parameter selected). This causes some confusion. :-)

To set the selected property (i.e. just make the option the currently selected option):

 var select = document.getElementById('countryselect'); var option; for (var i=0, i<select.options.length; i<iLen; i++) { option = select.options[i]; if (option.value == '4') { // or // if (option.text = 'Malaysia') { option.selected = true; return; } } 

Answer 4

As with jQuery 1.6 "To get and change DOM properties, such as checked, selected, or disabled state of form elements, use the .prop () method."

 $("#countryselect option[value=4]").prop("selected", "selected") 

Answer 5

Just try

 $("#countryselect").val('4') //OR $("#countryselect option").val('4')​.attr("selected", true)​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Tick ​​FIDDLE

Answer 6

 $('#countryselect > option[value *= "4"] ').attr('selected',true); 

it will work