Bootstrap-select 使用 jQuery 根据所选选项添加操作

Question

我有一个引导选择，我想根据用户交互添加条件。

如果用户打开下拉菜单并关闭用户：

1. 与显示的初始值相比，选择了不同的值，它会提醒“值已更改”
2. 保持当前值等于显示的初始值，它会提醒“相同的值”
3. 没有 select 任何选项，它会提示“无价值”

请在下面找到一个带有解释的简单演示。 我无法弄清楚为什么我的逻辑无法正常工作。

我所做的是：

我创建了一个全局变量initVal并在show.bs.select事件上存储了初始值。

然后在hide.bs.select事件上，我检查是否有/是否选择了选项val.length > 0并且该值与初始值initVal != val然后警报“值已更改”

然后，如果再次选择了选项val.length > 0并且该值等于初始值initVal == val然后警报“相同值”

然后如果没有选择val.length == 0则警告“任何值”

要查看问题，以 select 为例，关闭下拉菜单并再次打开它。 它每次都会向您显示新的价值。 或者选择X国家时，因此select其他国家然后取消选择，然后关闭之前，请保留相同的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 原样。