Bootstrap点击选择获取点击值

Bootstrap-select on click get clicked value

本文关键字：获取 选择 Bootstrap      更新时间：2023-09-26

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

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

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

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", "item 4", "item 5"]

插件站点：引导程序选择

如引导程序选择事件中所述，您可以使用changed.bs.select事件。

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

  • 事件
  • 单击索引
  • isSelected
  • previous值

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

或者只在选项元素上有事件。。。

$("option").on("click", function(value){
        var This = $(this);
        var selectedD = $(this).val();
        console.log(selectedD);
});

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

试试这个：

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

ref：在此处输入链接描述

或者只需查找元素上的任何更改，并在更改后获取值。

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