So legen Sie den ausgewählten Wert bei Auswahl mit dem Selectpicker-Plugin vom Bootstrap fest

Ich verwende das Bootstrap-Select- Plugin wie folgt:

HTML :

<select name="selValue" class="selectpicker">
   <option value="1">Val 1</option>
   <option value="2">Val 2</option>
   <option value="3">Val 3</option>
   <option value="4">Val 4</option>
</select>

Javascript :

$('select[name=selValue]').selectpicker();

Jetzt möchte ich den ausgewählten Wert auf diese Auswahl setzen, wenn auf die Schaltfläche geklickt wird ... so etwas:

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
});

Aber nichts passiert.

Wie kann ich das erreichen?

Der Wert ist korrekt ausgewählt, aber Sie haben ihn nicht gesehen, da das Plugin die tatsächliche Auswahl ausblendet und eine Schaltfläche mit einer ungeordneten Liste anzeigt. Wenn Sie also möchten, dass der Benutzer den ausgewählten Wert auf der Auswahl sieht, können Sie Folgendes tun ::

//Get the text using the value of select
var text = $("select[name=selValue] option[value='1']").text();
//We need to show the text inside the span that the plugin show
$('.bootstrap-select .filter-option').text(text);
//Check the selected attribute for the real select
$('select[name=selValue]').val(1);

Bearbeiten:

Wie @blushrt betont, ist eine bessere Lösung:

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh')

Bearbeiten 2:

Übergeben Sie die Werte als Array, um mehrere Werte auszuwählen.

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh');

Das ist alles was Sie tun müssen. Sie müssen das generierte HTML von selectpicker nicht direkt ändern, sondern nur das ausgeblendete Auswahlfeld ändern und dann den selectpicker aufrufen ('refresh').

$('.selectpicker').selectpicker('val', YOUR_VALUE);

Es ist keine Aktualisierung erforderlich, wenn der Parameter "val" zum Einstellen des Werts verwendet wird, siehe Geige . Verwenden Sie Klammern für den Wert, um mehrere ausgewählte Werte zu aktivieren.

$('.selectpicker').selectpicker('val', [1]); 

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
   $('select[name=selValue]').change();
});

Das hat bei mir funktioniert.

Eigentlich ist Ihr Wert eingestellt, aber Ihr Selectpicker wird nicht aktualisiert

Wie Sie der Dokumentation
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval entnehmen können

Der richtige Weg wäre dies

$('.selectpicker').selectpicker('val', 1);

Für mehrere Werte können Sie ein Array von Werten hinzufügen

$('.selectpicker').selectpicker('val', [1 , 2]);

Sie können den ausgewählten Wert festlegen, indem Sie die val-Methode für das Element aufrufen.

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

Dadurch werden alle Elemente in einer Mehrfachauswahl ausgewählt.

$('.selectpicker').selectpicker('selectAll');

Details finden Sie vor Ort: https://silviomoreto.github.io/bootstrap-select/methods/

$('selector').selectpicker('val',value);

Anstelle des Selektors können Sie dem Selektor entweder eine Klasse oder eine ID geben, zum Beispiel: $('#mySelect').selectpicker('val',your_value)

var bar= $(#foo).find("option:selected").val();

Eine leichte Variation von blushrt Antwort, wenn Sie keine "fest codierten" Werte für Optionen haben (dh 1, 2, 3, 4 usw.)

Angenommen, Sie rendern a <select>mit Optionswerten als GUIDs einiger Benutzer. Dann müssen Sie den Wert der Option irgendwie extrahieren, um sie auf dem zu setzen <select>.

Im Folgenden wählen wir die erste Option der Auswahl.

HTML :

<select name="selValue" class="selectpicker">
   <option value="CD23E546-9BD8-40FD-BD9A-3E2CBAD81A39">Dennis</option>
   <option value="4DDCC643-0DE2-4B78-8393-33A716E3AFF4">Robert</option>
   <option value="D3017807-86E2-4E56-9F28-961202FFF095">George</option>
   <option value="991C2782-971E-41F8-B532-32E005F6A349">Ivanhoe</option>
</select>

Javascript :

// Initialize the select picker.
$('select[name=selValue]').selectpicker();

// Extract the value of the first option.
var sVal = $('select[name=selValue] option:first').val();

// Set the "selected" value of the <select>.
$('select[name=selValue]').val(sVal);

// Force a refresh.
$('select[name=selValue]').selectpicker('refresh');

Wir haben dies in einer Auswahl mit dem Schlüsselwort multiple verwendet <select multiple>. In diesem Fall ist standardmäßig nichts ausgewählt, aber wir wollten, dass immer das erste Element ausgewählt wird.

Basierend auf der großartigen Antwort von @blushrt werde ich diese Antwort aktualisieren. Nur mit -

$("#Select_ID").val(id);

funktioniert, wenn Sie alles, was Sie brauchen, in den Selektor vorinstalliert haben.

$('.selectpicker').selectpicker("val", "value");

$('.selectpicker').selectpicker('val', '0');

Die '0' ist der Wert des Elements, das Sie auswählen möchten

Eine andere Möglichkeit besteht darin, mit diesem Schlüsselwort einfach das Objekt darin abzurufen und seinen Wert zu bearbeiten. Z.B :

$("select[name=selValue]").click(
    function() {
        $(this).val(1);
    });

Sie können dies auch einfach als mehrwertig bezeichnen

$(<your select picker>).selectpicker("val", ["value1", "value2"])

Weitere Informationen finden Sie hier https://developer.snapappointments.com/bootstrap-select/methods/

$('.selectpicker option:selected').val();

Setzen Sie einfach die Option: ausgewählt, um den Wert zu erhalten, da sich der Bootstrap-Auswahlpicker in ändert und auf andere Weise angezeigt wird. Aber wählen Sie noch dort ausgewählt

Benutzer-ID Für Element also

document.getElementById('selValue').value=Your Value;
$('#selValue').selectpicker('refresh');

Verwenden Sie dies und es wird funktionieren:

 $('select[name=selValue]').selectpicker('val', 1);