Bootstrap-select add actions based on selected options using jQuery

Question

I have a bootstrap-select and I want to add conditions based on user interaction.

If user opens the dropdown and on close the user :

1. selected different value(s) comparing to the initial value(s) on show, it will alert 'value changed'
2. kept the current value(s) equal to initial value(s) on show, it will alert 'same value'
3. doesn't select any option, it will alert 'no value'

Please find below a simple demo with an explanation. I couldn't figure out it why my logic is not working properly.

What I did is :

I created a global variable initVal and on show.bs.select event I store the initial value.

Then on hide.bs.select event I check if there is/are option(s) selected val.length > 0 and the value is different to initial value initVal != val then alert 'value changed'

Then if again if there is/are option(s) selected val.length > 0 and the value is equal to initial value initVal == val then alert 'same value'

Then if nothing selected val.length == 0 then alert 'any value'

To see the issue, select for example a country and close the dropdown and open it again. it will show you new value each time. or when a X country is selected, so select other countries then unselect them and before closing keep the same X country and it will not show correct result.

Any suggestions please ? Thank you very much.

$(document).ready(function() {

$("select").selectpicker();

// declare global variable to store the initial value of my select
var initVal;

// when the select dropdown opens, store the current value in initVal
$("select").on('show.bs.select', function () {
initVal = $(this).val();
console.log('initial value is ' + initVal);
});

// when the select dropdown is closed, store the current value in val
$("select").on("hide.bs.select", function() {
var val = $(this).val();
console.log('current value is ' + val);

// if the select has at least an option selected AND the current value is different to initial value then show alert new value
if ( (val.length > 0) && (initVal != val) )  {
alert("you selected a new value");  }
//if the select has at least an option selected AND the current value is equal to initial value then show alert same value
else if ( (val.length > 0) && (initVal == val) ) { 
alert("you selected the same value");  }
//if the select hasn't any option selected AND the current value is different to initial value then show alert same value
else if ( val.length == 0 ) { 
alert("no value selected");  }

});


} );

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>


<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple>
<option>Austria</option>  
<option>Denmark</option>
<option>France</option>  
<option>Japan</option>    
</select>

Answer 1

$(document).ready(function() {

$("select").selectpicker();

// declare global variable to store the initial value of my select
var initVal;

// when the select dropdown opens, store the current value in initVal
$("select").on('show.bs.select', function () {
initVal = $(this).val().toString();
console.log('initial value is ' + initVal);
});

// when the select dropdown is closed, store the current value in val
$("select").on("hide.bs.select", function() {
var val = $(this).val().toString();
console.log('current value is ' + val);


// if the select has at least an option selected AND the current value is different to initial value then show alert new value
if ( initVal !== val )  {
console.log("new");
//alert("you selected a new value");  
}
//if the select has at least an option selected AND the current value is equal to initial value then show alert same value
else if ( initVal === val) { 
console.log("same")
//alert("you selected the same value");  
}
//if the select hasn't any option selected AND the current value is different to initial value then show alert same value
else if ( val.length == 0 ) { 
console.log("none")
//alert("no value selected");  
}

});


} );

Your HTML as it is.