title: JQuery get the value of the newly selected/unselected element of a select
body: <p>I am currently working on multiselect (selectpicker) and I'd like to get the value of the element that the user just selected. </p>
  
  <p>Here's what I've got : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /&gt;
  
  &lt;select class="form-control selectpicker" multiple data-live-search="true" id="select_example"&gt;
    &lt;option value="1"&gt;First&lt;/option&gt;
    &lt;option value="2"&gt;Second&lt;/option&gt;
    &lt;option value="3"&gt;Third&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
       $(document).ready(function (){
           $(document).on('changed.bs.select', '#select_example', function(ev, picker) {
               alert($(this).val());
           });
       });
       
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>"$(this).val()" gives me the array of selected values. What I'd like to have is, for example if <em>1</em> is already selected and the user selects <em>2</em>, to know that 2 has just been selected. Or, if <em>1</em> and <em>2</em> are selected and the user unselects <em>2</em>, to know that <em>2</em> has just been unselected.</p>
  
  <p>Thanks in advance !</p>
  
  <p><strong>Update :</strong></p>
  
  <p>Thanks to Aditya Sharma, I found a solution to my problem :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /&gt;
  
  &lt;select class="form-control selectpicker" multiple data-live-search="true" id="select_example"&gt;
    &lt;option value="1"&gt;First&lt;/option&gt;
    &lt;option value="2"&gt;Second&lt;/option&gt;
    &lt;option value="3"&gt;Third&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
       $(document).ready(function (){
           $(document).on('changed.bs.select', '#select_example', function(e, clickedIndex, isSelected, previousValue) {
               alert($('#select_example option').eq(clickedIndex).val() + "  " + isSelected);
           });
       });
       
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>