Javascript Bootstrap-select on click 获取点击值

Bootstrap-select on click get clicked value

提问by Bonttimo

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

我正在使用 jQuery 插件：bootstrap-select.js我的 HTML 是 select(multiple) -> 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.

示例：用户选择项目 4 = console.log 项目 4。然后用户还选择项目 2 = console.log 项目 2。目前我正在获取项目 4，项目 2...它们总是在一个数组中而不是单独的。

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.

我的最终目标是根据用户选择的内容在页面上显示和隐藏 div。将有多个选择选项字段。

HTML code:

HTML代码：

<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:

JS代码：

$("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"]

电流输出： ["item 1", "item 3", "item 4", "item 5"]

Plug-in site: bootstrap-select

插件站点：bootstrap-select

回答by gaetanoM

As described in the bootstrap-select eventsyou can use changed.bs.selectevent.

如bootstrap-select 事件中所述，您可以使用changed.bs.select事件。

This event fires after the select's value has been changed. It passes through the following 4 arguments:

此事件在选择的值更改后触发。它通过以下 4 个参数：

• event
• clickedIndex
• newValue
• oldValue

• 事件
• 点击索引
• 新值
• 旧值

$(function () {
  $("#team").on("changed.bs.select", function(e, clickedIndex, newValue, oldValue) {
    var selectedD = $(this).find('option').eq(clickedIndex).text();
    console.log('selectedD: ' + selectedD + '  newValue: ' + newValue + ' 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="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>

回答by 4m1r

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/

https://jsfiddle.net/adjavaherian/ssqz4sh8/

回答by nageen nayak

Try this:

尝试这个：

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

ref : enter link description here

参考：在此处输入链接描述