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?

Answer 1

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>