Search code examples
jqueryselectjquery-selectors

Select2: Showing multiple selected values

Similar to this FIDDLE, how would you get is to show more than one selected value on load?

<select multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>


$('select').select2().select2('val','3')

enter image description here

FIDDLE

NEEDS to show something similar to this ON LOAD
enter image description here

Solution

  • Make the select to be multiple then pass the values as an array

    $('select').select2().select2('val', ['3', '1'])
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.3.0/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.3.0/select2.js"></script>
<select multiple="multiple" style="width:300px">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

    Demo: Fiddle

    After 4.1 

    $('select').select2().val(['3', '2']).trigger('change')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<select multiple="multiple" style="width:300px">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

    Demo: Fiddle