Bootstrap-select on click get clicked value [英] Bootstrap-select on click get clicked value

问题描述

我正在使用jQuery插件： bootstrap-select.js 我的HTML是select（multiple） - >选项。当用户选择或取消选择该选项时，我想获得当前点击的选项值。

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.

示例：用户选择项目4 =控制台.log项4.然后用户也选择Item 2 = console.log项2.目前我得到第4项，第2项......它们总是在一个数组而不是个体。

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.

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

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代码：

<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代码：

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

当前输出： [item 1，item 3，第4项，第5项

插件网站： bootstrap-select

推荐答案

如 bootstrap-select events 你可以使用 changed.bs.select 事件。

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

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

• 事件


• clickedIndex


• newValue


• oldValue

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

这篇关于Bootstrap-select on click get clicked value的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！