Bootstrap-select on click get clicked value
As described in the bootstrap-select events you can use changed.bs.select event.
This event fires after the select's value has been changed. It passes through the following 4 arguments:
- event
- clickedIndex
- isSelected
- previousValue
$(function () {
$('#team').selectpicker();
$("#team").on("changed.bs.select", function(e, clickedIndex, isSelected, oldValue) {
if (clickedIndex == null && isSelected == null) {
var selectedItems = ($(this).selectpicker('val') || []).length;
var allItems = $(this).find('option:not([disabled])').length;
if (selectedItems == allItems) {
console.log('seleted all');
} else {
console.log('deseleted all');
}
} else {
var selectedD = $(this).find('option').eq(clickedIndex).text();
console.log('selectedD: ' + selectedD + ' oldValue: ' + oldValue);
}
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<fieldset class="dreamT">
<select name="team" id="team" multiple class="selectpicker show-menu-arrow show-tick form-control" title="" multiple data-actions-box="true"
data-width="100%" data-size="auto" multiple data-selected-text-format="count > 2">
<optgroup>
<option value="item 1">Item 1</option>
<option value="item 2">Item 2</option>
<option value="item 3">Item 3</option>
<option value="item 4">Item 4</option>
<option value="item 5">Item 5</option>
<option disabled value="item 6">Item 6</option>
</optgroup>
</select>
</fieldset>Or just have the event on the option elements...
$("option").on("click", function(value){
var This = $(this);
var selectedD = $(this).val();
console.log(selectedD);
});
https://jsfiddle.net/adjavaherian/ssqz4sh8/