Get the current value in bootstrap-select

Question

I used e.target.value to retrieve the current selected value from bootstrap-select but it returned the first selected value i.e. the alert kept displaying item 1, when item 1 and item 2 where selected even when item 2 was the most recently selected.

How can I get the value for the recent selection and how can I get how many options are selected?

   <select multiple class="selectpicker" multiple data-selected-text-format="count > 1">
    <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>

$('.selectpicker').change(function (e) {
    alert(e.target.value);
});

Dextrose

Answer 1

I think the answer may be easier to understand like this:

$('#empid').on('click',function() {
  alert($(this).val());
  console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="empid" name="empname" multiple="multiple">
  <option value="0">item0</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
  <option value="4">item4</option>
</select>
<br />
Hold CTRL / CMD for selecting multiple fields

If you select "item1" and "item2" in the list, the output will be "1,2".

Deletion

I am getting all selected values or text, I want to have only the currently selected value, not like 'item 1 item 2' when I clicked 'item2'. – Dextrose

the code will result only current selected value if it is one it will show 1 if its multiple it will show all – Deletion

Yes, it is set multiple, How can I get the last clicked value? – Dextrose

your question is like getting current selected value ? now you are asking last selected value ? – Deletion

the currently selected value. It is the same with the last clicked value, isn't it? – Dextrose

check now if you click on one value for more then one time it ll show them as many time – Deletion

Answer 2

instead of e.target.value, you can use $(this).find("option:selected").text();

 $('.selectpicker').change(function () {
        var selectedItem = $('.selectpicker').val();
        alert(selectedItem);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>


<select class="selectpicker" multiple data-selected-text-format="count > 1">
	<option value="1">Item 1</option>
	<option value="2">Item 2</option>
	<option value="3">Item 3</option>
	<option value="4">Item 4</option>
	<option value="5">Item 5</option>
</select>

Machutte

this isn't true because in many cases the value isn't the same as the text, in my case anyway! – Suffolk

yes you are right. Both are not always necessary to be same – Machutte

Answer 3

According to this post, you should do something like :

$('.selectpicker').on('changed.bs.select', function (e) {
    var selected = e.target.value;
});

Rogation

Answer 4

$('.selectpicker').on('change', function(){
    var selected = []
    selected = $('.selectpicker').val()
    console.log(selected); //Get the multiple values selected in an array
    console.log(selected.length); //Length of the array
});

Bosky

Answer 5

This is the Solution:

$('#payment_method').on('hidden.bs.select', function (e) {
  // console.log(e.target.value);

  console.log(e.target.selectedOptions.length);

$.each( e.target.selectedOptions , function( index, obj ){
    console.log(obj.value);
});

});

You get the length of the selections, so may be helpful in for loop

console.log(e.target.selectedOptions.length);

and you can loop through the selected values too:

$.each( e.target.selectedOptions , function( index, obj ){
    console.log(obj.value);
});

Marquess

Answer 6

This is how I get the value of selected Item from select list:

var e = document.getElementById("field_ID");  
var selected_value = e.options[e.selectedIndex].value;

Dinahdinan

Answer 7

 $('.selectpicker').change(function () {
        var selectedItem = $('.selectpicker').val();
        alert(selectedItem);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>


<select class="selectpicker" multiple data-selected-text-format="count > 1">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="4">Item 4</option>
    <option value="5">Item 5</option>
</select>

Franciskus

Answer 8

In your case you need to take the value. I use jQuery to help for this:

$('.selectpicker').change(function (e) {
    alert($(e.target).val());
});

Alexandra

Answer 9

My solution might help somebody

The option value isn't always the same as the text

$('.selectpicker').on('changed.bs.select', function () {
    let val = $(this).siblings('.btn.dropdown-toggle').attr('title');
    console.log(val);
});

Heterochromous

Answer 10

From the Bootstrap-select documentation you can use:

const selected = $('.selectpicker').selectpicker('val');

console.log(selected); //display selected option values as array
console.log(selected.length); // display number of selected options
console.log(selected.at(-1)); // display the most recently selected option

Peder

Answer 11

after my try, i found there are two ways to get the current selected value.

1. $('.selectpicker').selectpicker('val') in the office document, it only say set value through $('.selectpicker').selectpicker('val', [0, 1]); so i guess .selectpicker('val') would return selected val. and i try it, it works.
2. use $(this).val() inside event listen function, as @Mirza Obaid mention $('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) { const selectedVal = $(this).val(); }

Fright