select2.js multiple

by Zakaria Acharki

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<select multiple="multiple" id="e1" style="width:300px">
  <option value="AL" selected> Alabama</option>
  <option value="Am" selected>Amalapuram</option>
  <option value="An" selected>Anakapalli</option>
  <option value="Ak" selected>Akkayapalem</option>
  <option value="WY" selected>Wyoming</option>
</select>

<button type='button' id='submit'>Submit</button>
<br>
<div class='result'></div>

CSS

.select2-container-multi .select2-choices .select2-search-choice.selected{
  background-color: #286090;
    border-color: #204d74;
  color: #FFF;
  background-image : none;
}

JavaScript

$("#e1").select2();

    $('body').on('click','.select2-search-choice', function(){
      $(this).toggleClass('selected')
    })

    $('body').on('click','#submit', function(){
    	$('.result').html('');
      $('#s2id_e1 .select2-search-choice.selected').each(function(){
        $('.result').append($(this).text()+'<br>');
      })
    })