问题
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 initial value(s) on show, it will alert 'value changed'
- kept the current value(s) equal to initial value(s) on show, it will alert 'same value'
- 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>
回答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.
来源:https://stackoverflow.com/questions/62850484/bootstrap-select-add-actions-based-on-selected-options-using-jquery