Bootstrap-select add actions based on selected options using jQuery

血红的双手。 提交于 2021-01-28 18:21:33

问题


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>

回答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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!