Bootstrap-wählen Sie auf klicken Sie erhalten Wert

Question

Ich benutze ein jQuery-Plug-in: bootstrap-select.js mein HTML ist wählen (mehrere) -> Option. Ich möchte den aktuell ausgewählten Optionswert abrufen, wenn ein Benutzer die Option auswählt oder die Auswahl aufheben.

Beispiel: Der Benutzer wählt Element 4 = console.log Element 4. Dann wählt der Benutzer auch Element 2 = console.log Element 2. Momentan bekomme ich Element 4, Element 2 ... sie sind immer in ein Array und nicht individuell.

Mein Endziel ist es, divs auf der Seite anzuzeigen und auszublenden, je nachdem, was der Benutzer ausgewählt hat. Es wird mehrere Auswahloptionen geben.

HTML-Code:

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

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

Stromausgang: ["item 1", "item 3", "item 4", "item 5"]

Plug-in-Website: bootstrap-select

Answer 1

Wie in der beschriebenen bootstrap-select events Sie changed.bs.select Ereignis verwenden können.

Dieses Ereignis wird ausgelöst, nachdem der Wert des Auswahlelements geändert wurde. Es geht durch die folgenden vier Argumente:

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

Oder haben nur die Veranstaltung auf die Option Elemente ...

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

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