J'utilise Bootstrap 3.0.2 et le plugin Bootstrap-select .
Voici ma liste de sélection:
<select class="selectpicker" data-live-search="true" data-size="7">
<option>Petr Karel</option>
<option>Honza Novák</option>
<option>David Egydy</option>
<option>Sláva Kovář</option>
<option>Hana Skalická</option>
<option>Simona Kolářová</option>
<option>Kateřina Sychová</option>
<option>Amálka Sychová</option>
<option>Jana Sychová</option>
<option>Magdaléna Sychová</option>
<option>Tereza Sychová</option>
<option>Bohdana Sychová</option>
</select>
Voici mon JavaScript:
//inicialization of select picker
$('.selectpicker').selectpicker();
//on change function i need to control selected value
$('select.selectpicker').on('change', function(){
var selected = $('.selectpicker option:selected').val();
alert(selected);
});
Mon problème est que la fonction de changement ne fonctionnera pas. Cela ne fait rien et je ne trouve pas de solution par moi-même.
Si je le mets dans un document prêt au lieu de changer de fonction, il semble fonctionner. Donc je suppose que j'ai une erreur quelque part dans:
$('select.selectpicker').on('change', function(){
J'ai aussi essayé d'utiliser uniquement:
$('.selectpicker').on('change', function(){
sans ce préfixe de sélection mais rien ne change.
La solution met le code jQuery dans document.ready()
. Merci à Kartikeya
Lorsque Bootstrap Select est initialisé, il crée un ensemble de div personnalisées qui s'exécutent le long de l'élément <select>
d'origine et synchronise généralement l'état entre les deux mécanismes d'entrée.
Autrement dit, une façon de gérer les événements sur bootstrap select consiste à écouter les événements de la sélection d'origine qu'il modifie, quelle que soit la personne qui l'a mis à jour.
Écoutez simplement un événement { change
} et obtenez la valeur sélectionnée en utilisant javascript ou jQuery comme ceci:
$('select').on('change', function(e){
console.log(this.value,
this.options[this.selectedIndex].value,
$(this).find("option:selected").val(),);
});
* NOTE: comme pour tout script dépendant du DOM, veillez à attendre le événement prêt pour le DOM avant de l'exécuter.
$(function() {
$('select').on('change', function(e){
console.log(this.value,
this.options[this.selectedIndex].value,
$(this).find("option:selected").val(),);
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
<select class="selectpicker">
<option val="Must"> Mustard </option>
<option val="Cat" > Ketchup </option>
<option val="Rel" > Relish </option>
</select>
Comme cette réponse fait allusion _, Bootstrap Select a son propre ensemble de événements personnalisés , y compris changed.bs.select
qui:
se déclenche après la modification de la valeur de la sélection. Il passe par event, clickedIndex, newValue, oldValue.
Et vous pouvez utiliser ça comme ça:
$("select").on("changed.bs.select",
function(e, clickedIndex, newValue, oldValue) {
console.log(this.value, clickedIndex, newValue, oldValue)
});
$(function() {
$("select").on("changed.bs.select",
function(e, clickedIndex, newValue, oldValue) {
console.log(this.value, clickedIndex, newValue, oldValue)
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
<select class="selectpicker">
<option val="Must"> Mustard </option>
<option val="Cat" > Ketchup </option>
<option val="Rel" > Relish </option>
</select>
C'est ce que j'ai fait.
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
var selected = $(e.currentTarget).val();
});
$("#Id").change(function(){
var selected = $('#Id option:selected').val();
alert(selected);
});
Je pense que c'est ce dont vous avez besoin.
Ma mise en oeuvre
import $ from 'jquery';
$(document).ready(() => {
$('#whatDescribesYouSelectInput').on('change', (e) => {
if (e.target.value === 'Other') {
$('#whatDescribesYouOtherInput').attr('type', 'text');
$('#specifyLabel').show();
} else {
$('#whatDescribesYouOtherInput').attr('type', 'hidden');
$('#specifyLabel').hide();
}
});
});