Bootstrap-選擇點擊獲取點擊值

Question

我使用的是一個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"]

插件網站：bootstrap-select

Answer 1

正如描述的bootstrap-select events可以使用changed.bs.select事件。

此事件在選擇值更改後觸發。它通過以下4個參數：

• 事件
• clickedIndex
• NEWVALUE
• 屬性oldValue

$(function() { 
 
    $("#team").on("changed.bs.select", function(e, clickedIndex, newValue, oldValue) { 
 
    var selectedD = $(this).find('option').eq(clickedIndex).text(); 
 
    $('#log').text('selectedD: ' + selectedD + ' newValue: ' + newValue + ' oldValue: ' + oldValue); 
 
    }); 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<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> 
 
<p id="log"></p>

Answer 2

或者只是對選項元素的事件......

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

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