Bootstrap-choisir - comment le feu de l'événement sur le changement

Je suis en utilisant Bootstrap 3.0.2 et la Bootstrap-sélectionnez plugin.

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

Question

Mon problème est que le changement de fonction ne fonctionne pas. Il ne fait rien, et je ne peux pas trouver la solution par moi-même.

Si je l'ai mis dans le document de prêt au lieu de changer de fonction, il semble être au travail. Donc je suppose que j'ai erreur quelque part:

$('select.selectpicker').on('change', function(){

J'ai aussi essayé d'utiliser seulement:

$('.selectpicker').on('change', function(){

sans ce préfixe, mais rien ne change.

Mise à JOUR

Solution est de mettre en jquery dans document.ready(). Grâce à Kartikeya

pourquoi vous ne sont pas de mettre jquery code dans le document.prêt()..???
Je l'ai essayer et je travaille. Je suis un imbécile. Merci pour les conseils.

InformationsquelleAutor user3690515 | 2014-09-08

Lors de l'Amorçage, Sélectionnez initialise, il va créer un ensemble personnalisé de divs qui longent l'original <select> élément et synchronisez généralement d'état entre les deux mécanismes d'entrée.

Bootstrap-choisir - comment le feu de l'événement sur le changement

Qui est-à-dire qu'une façon de gérer les événements sur bootstrap select est à écouter les événements sur l'original, sélectionnez, qu'il modifie, indépendamment de qui est mis à jour.

Solution 1 - Indigène Événements

Il suffit d'écouter pour une modifier événement et d'obtenir la valeur sélectionnée à l'aide de 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 avec n'importe quel script en misant sur les DOM, assurez-vous d'attendre pour les DOM prêt événement avant l'exécution de}

Démo dans la Pile des Extraits de:

JS:

$(function() {

  $('select').on('change', function(e){
    console.log(this.value,
                this.options[this.selectedIndex].value,
                $(this).find("option:selected").val(),);
  });
  
});

HTML:

<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 De 2 - Bootstrap Sélectionnez Les Événements Personnalisés

Comme cette réponse fait allusion, Bootstrap Sélectionnez a son propre ensemble de les événements personnalisés, y compris changed.bs.select qui:

se déclenche après l'sélectionnez la valeur a été modifiée. Il passe à travers l'événement, clickedIndex, newValue, oldValue.

Et vous pouvez l'utiliser comme ceci:

$("select").on("changed.bs.select", 
      function(e, clickedIndex, newValue, oldValue) {
    console.log(this.value, clickedIndex, newValue, oldValue)
});

Démo dans la Pile des Extraits de:

JS:

$(function() {

  $("select").on("changed.bs.select", 
        function(e, clickedIndex, newValue, oldValue) {
      console.log(this.value, clickedIndex, newValue, oldValue)
  });

});

HTML:

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

une Autre solution Ce n'est pas d'obtenir la valeur de la dernière un-selected option, donc au lieu d'essayer cette answer
bon point, j'ai incorporé des bits à partir de cette réponse, et a identifié les différences entre les deux

InformationsquelleAutor KyleMit

29

C'est ce que j'ai fait.
```
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
});
```
- une Autre solution Ce n'est pas d'obtenir la valeur de la dernière un-selected option, donc au lieu d'essayer cette answer
InformationsquelleAutor s k
7

Solution la plus simple serait -

$('.selectpicker').trigger('change');

InformationsquelleAutor Akshay Soni

$("#Id").change(function(){
    var selected = $('#Id option:selected').val();
    alert(selected);           
});

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

InformationsquelleAutor Sangri

Ma mise en œuvre

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

InformationsquelleAutor Cody Elhard

Vous devez vous connecter pour publier un commentaire.