1######## In your HTML:
2<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
3 <option value="AL">Alabama</option>
4 ...
5 <option value="WY">Wyoming</option>
6</select>
7
8####### In your Javascript (external .js resource or <script> tag):
9$(document).ready(function() {
10 $('.js-example-basic-multiple').select2();
11});
12
13######### Get Selected values
14$('.js-example-basic-multiple').select2('val')
15
16######## Pre select values on page loads
17 $('.js-example-basic-multiple').val(['AL', 'WY']).trigger('change');
1<html>
2 <head>
3 <title>Using Select2</title>
4 <!-- Bootstrap CSS -->
5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
6 <!-- Select2 CSS -->
7 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
8 </head>
9 <body>
10 <div class="jumbotron">
11 <div class="container bg-danger">
12 <div class="col-md-6">
13 <label>Single Select2</label>
14 <select id="single" class="js-states form-control">
15 <option>Java</option>
16 <option>Javascript</option>
17 <option>PHP</option>
18 <option>Visual Basic</option>
19 </select>
20 </div>
21 <div class="col-md-6">
22 <label>Multiple Select2</label>
23 <select id="multiple" class="js-states form-control" multiple>
24 <option>Java</option>
25 <option>Javascript</option>
26 <option>PHP</option>
27 <option>Visual Basic</option>
28 </select>
29 </div>
30 </div>
31 </div>
32 <!-- jQuery -->
33 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
34 <!-- Select2 -->
35 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
36 <script>
37 $("#single").select2({
38 placeholder: "Select a programming language",
39 allowClear: true
40 });
41 $("#multiple").select2({
42 placeholder: "Select a programming language",
43 allowClear: true,
44 maximumSelectionLength: 2
45 });
46 </script>
47 </body>
48</html>