How can i by default set all options selected in multi-select dropdown?

Question

I am populating my multi-select dropdown from json object.

Here is my select dropdown

<select size="2" id="inst_all" style="width:200px;" multiple ng-multiple="true" ng-model="selectedCountries"
ng-options="sort.Institute as sort.Institute for sort in products | unique : 'Institute'">
</select>

I have tried with following jquery snippet , but it didnt worked.

<script>$('#inst_all option').prop('selected', true);</script>

How can i select all options be default ?

Where *exactly* do you run your script? Could be that you're running it too soon, try wrapping it in doc.ready `$(() => { ..your code.. });` — freedomn-m, Sep 28 '22 at 10:50
Does this answer your question [set selected for multi selection](https://stackoverflow.com/questions/37196962/set-selected-attribute-for-single-multi-selection-with-ng-options) or this [use ng-option to set default value of select](https://stackoverflow.com/questions/17329495/how-to-use-ng-option-to-set-default-value-of-select-element) (though that's for a singlevalue, looks like you set it on the `ng-model`) — freedomn-m, Sep 28 '22 at 10:54

score 0 · Answer 1 · answered Sep 28 '22 at 11:20

When using dynamic content from a json file/object you should always make sure the page is fully loaded before doing any actions on DOM elements.
Use $( document ).ready(function() {

$( document ).ready(function() {
     $('#inst_all option').prop('selected', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="2" id="inst_all" style="width:200px;" multiple ng-multiple="true" ng-model="selectedCountries"
ng-options="sort.Institute as sort.Institute for sort in products | unique : 'Institute'">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

How can i by default set all options selected in multi-select dropdown?

1 Answers1