Bootstrap - выберите действия добавления на основе выбранных параметров, используя jQuery

Question

У меня есть bootstrap -select , и я хочу добавить условия на основе взаимодействия с пользователем.

Если пользователь открывает раскрывающийся список и закрывает пользователя:

1. выбрано другое значение (значения) по сравнению с начальным значением (ями) на показе, он будет предупреждать «значение изменено»
2. сохраняет текущее значение (я) равным начальному значению (ям) на показе , он выдаст предупреждение «то же значение»
3. не выбирает никаких опций, он выдаст предупреждение «нет значения»

Пожалуйста, найдите ниже простую демонстрацию с объяснением. Я не мог понять, почему мой logi c не работает должным образом.

Я сделал следующее:

Я создал глобальную переменную initVal и на show.bs.select событии I сохранить начальное значение.

Затем при событии hide.bs.select я проверяю, выбраны ли / выбраны ли опции val.length > 0 и значение отличается от начального значения initVal != val, затем предупреждение «значение изменено»

Затем, если снова, если есть / выбраны опции (-ы) val.length > 0 и значение равно начальному значению initVal == val, то предупреждение «то же значение»

Затем, если ничего не выбрано val.length == 0 затем предупредите "любое значение"

Чтобы увидеть проблему, выберите, например, страну, закройте раскрывающийся список и откройте его снова. он будет каждый раз показывать вам новое значение. или когда выбрана страна X, выберите другие страны, затем отмените выбор и перед закрытием оставьте ту же страну X, и она не покажет правильный результат.

Любые предложения, пожалуйста? Большое спасибо.

$(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");  
}

});


} );

Ваш HTML как есть.