J'utilise un plug-in jQuery: bootstrap-select.js mon HTML est select (multiple) -> option. Je souhaite obtenir la valeur d'option actuellement sélectionnée lorsque l'utilisateur sélectionne ou désélectionne l'option.
Exemple: l'utilisateur sélectionne l'élément 4 = élément console.log 4. Ensuite, l'utilisateur sélectionne également l'élément 2 = élément console.log 2. Je reçois actuellement l'élément 4, l'élément 2 ... ils sont toujours dans un tableau. et non individuel.
Mon objectif final est d'afficher et de masquer les divs sur la page en fonction de ce que l'utilisateur a sélectionné. Il y aura plusieurs champs d'option de sélection.
Code 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>
Code JS:
$("select#team").on("change", function(value){
var This = $(this);
var selectedD = $(this).val();
console.log(selectedD);
});
Sortie actuelle: ["item 1", "item 3", "item 4", "item 5"]
Site plug-in: bootstrap-select
Comme décrit dans les événements bootstrap-select vous pouvez utiliser l'événement modified.bs.select.
Cet événement se déclenche après la modification de la valeur de la sélection. Il passe par les 4 arguments suivants:
$(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>
Ou simplement avoir l'événement sur les éléments d'option ...
$("option").on("click", function(value){
var This = $(this);
var selectedD = $(this).val();
console.log(selectedD);
});