Setting selected attribute for <select multiple> with jquery

Question

I have a multiple select like this one could be:

 <select multiple id="brand">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

And I'm looking for a way to end up like:

 <select multiple id="brand">
  <option value="volvo" selected="selected">Volvo</option>
  <option value="saab" selected="selected">Saab</option>
  <option value="opel" selected="selected">Opel</option>
  <option value="audi" selected="selected">Audi</option>
</select>

I can't depend on external libraries and I can't make the .each function to work properly. Besides I'm getting the original dinamically set with many fields, and this will be set to this only in a particular case, but i can't figure out why this isn't working for me. The closest approach i found is:

$("#brand").each(function(){$(this).attr("selected","selected");});

Can you please point me out where I'm going wrong? Thanks

Do you want all selected? If so, the jquery that you've posted wont work, because you are looking for the select tag, you must look up for the option tag. — Brank Victoria
– Brank Victoria, Commented Jan 21, 2019 at 15:02
@MarsAndBack i've already checked before i posted that but didnt worked for me or i didn't know how. Thanks anyway. — Mbotet
– Mbotet, Commented Jan 22, 2019 at 7:16

trincot · Accepted Answer · 2019-01-21 15:02:01Z

1

You need to select the options, for instance with a #brand > option selector:

$("#brand > option").each(function() {
    $(this).attr("selected","selected");
});

console.log($("#brand").html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="brand">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

answered Jan 21, 2019 at 15:02

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mbotet Over a year ago

Just the missing sintax I was looking for. Thanks!

Friedrich Siever · Accepted Answer · 2019-01-21 15:24:24Z

1

in Vanilla Script you could use something like this

  document.querySelectorAll('#brand option').forEach((o)=>{
    o.selected = 'selected'
  })

If You need IE, be aware that for Each is not supported with node Lists. This should work inkl. IE

nodesArray = [].slice.call(document.querySelectorAll("#brand option"));
nodesArray.forEach(function (o) {
     o.selected = 'selected'
})

You wont see the changes in HTML Code, but the DOM Properties of the options will change. Hope this helps.

edited Jan 21, 2019 at 15:24

answered Jan 21, 2019 at 15:13

Friedrich Siever

4898 silver badges15 bronze badges

2 Comments

Mbotet Over a year ago

Besides the solution i really appreciate the support with IE backup.

Mbotet Over a year ago

I cant approve both answers, and Trinkot got just to what was in my mind. But your answer is really helpful and works too. I think it will help other users too

Collectives™ on Stack Overflow

Setting selected attribute for <select multiple> with jquery

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related