it-swarm.com.de

Bootstrap-select - wie das Ereignis bei Änderung ausgelöst wird

Ich verwende Bootstrap 3.0.2 und das Bootstrap-select plugin.

Hier ist meine Auswahlliste:

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

Hier ist mein 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);
});

Problem

Mein Problem ist, dass die Änderungsfunktion nicht funktioniert. Es tut nichts und ich kann keine Lösung für mich finden.

Wenn ich es in das Dokument einlege, statt dessen die Funktion zu ändern, scheint es zu funktionieren. Ich denke, ich habe irgendwo einen Fehler: 

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

Ich habe auch versucht, nur zu verwenden: 

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

ohne dieses select-Präfix ändert sich nichts.

AKTUALISIEREN

Die Lösung setzt Jquery-Code in document.ready(). Dank an Kartikeya

48
user3690515

Wenn Bootstrap Select initialisiert wird, erstellt es eine Gruppe benutzerdefinierter divs, die neben dem ursprünglichen <select>-Element laufen und normalerweise den Status zwischen den beiden Eingabemechanismen synchronisieren.

 BS Select Elements

Dies bedeutet, dass eine Möglichkeit, Ereignisse in der Bootstrap-Auswahl zu behandeln, darin besteht, Ereignisse auf der ursprünglichen Auswahl zu überwachen, die von ihr geändert wird, unabhängig davon, wer sie aktualisiert hat.

Lösung 1 - Native Events

Hören Sie einfach auf ein change-Ereignis und erhalten Sie den ausgewählten Wert mithilfe von Javascript oder jQuery wie folgt: 

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

* NOTE: Wie bei jedem Skript, das auf das DOM angewiesen ist, müssen Sie vor dem Ausführen des Ereignisses DOM ready warten

Demo in Stack-Ausschnitten:

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

Lösung 2 - Bootstrap Wählen Sie benutzerdefinierte Ereignisse aus

Da diese Antwort anspielt , hat Bootstrap Select einen eigenen Satz von benutzerdefinierten Ereignissen , einschließlich changed.bs.select, wobei

wird ausgelöst, nachdem der Wert der Auswahl geändert wurde. Es wird durch event, clickedIndex, newValue, oldValue geleitet.

Und das kannst du so machen:

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

Demo in Stack-Ausschnitten:

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

Das habe ich getan.

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
});
27
s k

Die einfachste Lösung wäre -

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

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

Ich denke, das ist was du brauchst.

2
Sangri

Meine umsetzung

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