Bootstrap-select Add Actions Based On Selected Options Using Jquery

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 : selected different value(s) comparing to the i

Solution 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.