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

Question

Below is code for select option and generate using php from database and i try 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 try to refer 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.

Community · Accepted Answer · 2020-05-14 09:00:02Z

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

If an option has the selected attribute, then when the page is first loaded, or the form the control is in is reset, that option will be the selected option.

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

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

var select = document.getElementById('countryselect');
var option;

for (var i=0; i<select.options.length; i++) {
  option = select.options[i];

  if (option.value == '4') {
  // or
  // if (option.text == 'Malaysia') {
     option.setAttribute('selected', true);

     // For a single select, the job's done
     return; 
  } 
}

Note that this may not make the option the currently selected option, it will just add the selected attribute. To make sure it's selected (if that is what is required), the also set the selected property to true (see below).

Note that the second argument to setAttribute is supposed to be a string that is used to set the attribute's value. However, the selected attribute doesn't have a "setable" value, so the second argument is ignored (e.g. even false will still set the attribute and make the option the default selected option). That causes some confusion. :-)

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

var select = document.getElementById('countryselect');
var option;

for (var i=0; i<select.options.length; i++) {
  option = select.options[i];

  if (option.value == '4') {
  // or
  // if (option.text == 'Malaysia') {
     option.selected = true;
     return;
  } 
}

Thank you for this super-clear explanation. Much appreciated and it worked like a charm.

Muthu Kumaran · Accepted Answer · 2012-09-24 02:10:12Z

16

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

It will automatically set selected=selected

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

answered Sep 24, 2012 at 2:10

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

Comments

Samar Rizvi · Accepted Answer · 2012-09-24 02:10:43Z

8

localStorage.getItem("Select1") will return Malaysia and $(e).val() will return 1,2...5 in each loop. So your condition will never be true. Instead use

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

answered Sep 24, 2012 at 2:10

Samar Rizvi

4335 silver badges18 bronze badges

Comments

sidarcy · Accepted Answer · 2013-07-10 14:33:42Z

7

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

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

answered Jul 10, 2013 at 14:33

sidarcy

3,0082 gold badges39 silver badges37 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-09-24 02:12:38Z

1

Just try

$("#countryselect").val('4')
    //OR

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

Check this FIDDLE

edited Sep 24, 2012 at 2:12

answered Sep 24, 2012 at 2:07

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

Ram Over a year ago

Do you mean $("#countryselect option[value=4]").attr("selected", true)?

Roma Ш. · Accepted Answer · 2024-11-07 12:12:57Z

0

const formSelect = document.querySelector("#form-select");

formSelect.selectedIndex = 3; // !

<select id="form-select">
  // ...
</select>

Link

edited Nov 7, 2024 at 12:12

answered Nov 5, 2024 at 15:12

Roma Ш.

12 bronze badges

1 Comment

Ram Chander Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Rahul · Accepted Answer · 2012-09-24 02:17:07Z

-1

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

this will work

answered Sep 24, 2012 at 2:17

Rahul

1,5793 gold badges18 silver badges37 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related