Get current value in bootstrap-select

Question

I used e.target.value to extract the current selected value from bootstrap-select, but it returned the first selected value, i.e. e.target.value warning continued to display element 1 when element 1 and element 2 were selected, even when element 2 was selected last.

How can I get the value for a recent selection and how can I find out 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); }); 

Answer 1

I think the answer might be easier to understand as follows:

 $('#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".

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/ bootstrap-select@1.13.9 /dist/css/bootstrap-select.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://cdn.jsdelivr.net/npm/ bootstrap-select@1.13.9 /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> 

Answer 3

 $('.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 }); 

Answer 4

According to this post you should do something like:

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

Answer 5

This 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 sample length, so it can be useful in a loop

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

and you can also scroll through the selected values:

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

Answer 6

In your case, you need to accept the value. I am using jQuery to help with this:

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

Answer 7

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

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