Bootstrap-select on click get clicked value

Question

I am using a jQuery plug-in: bootstrap-select.js my HTML is select(multiple) -> option. I would like to get the currently clicked on option value when a user selects or deselects the option.

Example: User selects Item 4 = console.log item 4. Then the user also selects Item 2 = console.log item 2. Currently i'm getting item 4, item 2... they are always in a array and not individual.

My end goal is to show and hide divs on the page depending on what the user has selected. There will be multiple select option fields.

HTML code:

<fieldset class="dreamT">
   <select name="team" id="team" multiple class="dropdown selectpicker show-menu-arrow show-tick form-control" title="Pelaajat" 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>

JS code:

$("select#team").on("change", function(value){
   var This      = $(this);
   var selectedD = $(this).val();
   console.log(selectedD);
});

Current output: ["item 1", "item 3", "item 4", "item 5"]

Plug-in site: bootstrap-select

have you tried `$("select#team").on("click", function(event, value)`? — Osuwariboy, Apr 29 '16 at 17:58
@Osuwariboy no? what do you mean? How would i implement that? :D — Bonttimo, Apr 29 '16 at 18:07

gaetanoM · Accepted Answer · 2020-09-06T14:41:41.500

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>

It doesn't work with Select All / Deselect All options (data-actions-box="true") then clickedIndex and newValue and null :( — Pavel Novák, Sep 05 '20 at 22:53
@PavelNovák I'm sorry, but it was an old answer and the plugin was updated. Snippet updated. — gaetanoM, Sep 06 '20 at 14:42

score 2 · Answer 2 · answered Apr 29 '16 at 18:09

2

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/

answered Apr 29 '16 at 18:09

4m1r

12,234
9
46
58

This does not work with the plug-in. Somehow it returns nothing. I don't know why but if i use click it does nothing. – Bonttimo Apr 29 '16 at 18:14
2

that's because click doesn't happen on option, it happens on span that represents it – dmitry.matora Dec 07 '17 at 09:13

score 1 · Answer 3 · answered May 31 '19 at 12:42

1

Try this:

console.log(("#your-id option:selected").text());

ref : enter link description here

answered May 31 '19 at 12:42

nageen nayak

1,262
2
18
28

score 0 · Answer 4 · answered Dec 04 '21 at 14:26

0

Or just look for any changes on the element and get the value if changed.

$("#components").on("change", function(e) {
  var selected = document.querySelector("#components").selectedOptions[0].value
  alert(selected)
});

answered Dec 04 '21 at 14:26

MrAni

23
6

Bootstrap-select on click get clicked value

4 Answers4

Linked