web-dev-qa-db-fra.com

Bootstrap-select - Comment déclencher un événement lors d'un changement

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);
});

Problème

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.

METTRE À JOUR

La solution met le code jQuery dans document.ready(). Merci à Kartikeya

javascriptjquerytwitter-bootstrapbootstrap-select
48
user3690515

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.

BS Select Elements

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.

Solution 1 - Événements autochtones

É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.

Demo in Stack Snippets:

$(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>

Solution 2 - Événements personnalisés par Bootstrap 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)
});

Demo in Stack Snippets:

$(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>

77
KyleMit

C'est ce que j'ai fait.

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
});
27
s k
$("#Id").change(function(){
    var selected = $('#Id option:selected').val();
    alert(selected);           
});

Je pense que c'est ce dont vous avez besoin.

2
Sangri

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();
    }
  });
});
0
Cody Elhard