クリックしてブートストラップを選択クリックして値を取得

Question

私はjQueryプラグインを使用しています：bootstrap-select.js私のHTMLは選択（複数） - >オプションです。ユーザーがオプションを選択または選択解除すると、現在クリックされているオプション値を取得したいと考えています。

例：ユーザーが項目4 =はconsole.log項目4を選択した後、ユーザはまた、現在、私は、彼らが常にある...項目4、項目2を取得してい項目2 =はconsole.logアイテム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

あなたはchanged.bs.selectイベントを使用することができますbootstrap-select eventsで説明したように。

このイベントは、選択値が変更された後に発生します。それは、以下の4つの引数を通過：newValueに

• イベント
• clickedIndex
• を
• 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/