web-dev-qa-db-de.com

So legen Sie den ausgewählten Wert mit selectpicker plugin von bootstrap für select fest

Ich benutze 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 Option setzen, wenn auf die Schaltfläche geklickt wird.

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

Aber nichts passiert.

Wie kann ich das erreichen?

78
jcvegan

Der Wert ist korrekt ausgewählt, aber Sie haben ihn nicht gesehen, weil das Plugin die echte Auswahl verdeckt und eine Schaltfläche mit einer ungeordneten Liste anzeigt. Wenn Sie also möchten, dass der Benutzer den ausgewählten Wert in der Auswahl sieht, können Sie so etwas 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 darauf hinweist, ist eine bessere Lösung:

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

Edit 2:

Um mehrere Werte auszuwählen, übergeben Sie die Werte als Array.

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

Das ist alles was Sie tun müssen. Sie müssen die generierte HTML-Datei von selectpicker nicht direkt ändern. Ändern Sie einfach das ausgeblendete Auswahlfeld und rufen Sie dann selectpicker ('refresh') auf.

58
blushrt
$('.selectpicker').selectpicker('val', YOUR_VALUE);
35
Jesterhead

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

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

Das hat bei mir funktioniert.

9

Ihr Wert ist tatsächlich festgelegt, aber Ihr Auswahlbild wird nicht aktualisiert

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

Der richtige Weg, dies zu tun, wäre

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

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

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

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/

3
Awanish Kumar
var bar= $(#foo).find("option:selected").val();
2
abdul

Eine leichte Variation von blushrt's Antwort für, wenn Sie keine "hartcodierten" Werte für Optionen haben (d. H. 1, 2, 3, 4 usw.).

Angenommen, Sie rendern einen <select>, wobei die Optionswerte GUIDs einiger Benutzer sind. Dann müssen Sie den Wert der Option irgendwie extrahieren, um ihn auf den <select> zu setzen.

Im Folgenden wählen wir die erste Option des select aus.

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 einem select mit dem mehrfachen Schlüsselwort <select multiple> verwendet. In diesem Fall ist standardmäßig nichts ausgewählt, aber wir wollten, dass das erste Element immer ausgewählt wird.

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

Setzen Sie einfach die Option: selected, um einen Wert zu erhalten, da sich der bootstrap selectpicker zu ändert und auf andere Weise angezeigt wird. Aber wähle immer noch dort aus

0
Fabio Almeida

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/

0
Andrew Van Beek

Aufgrund 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 geladen haben.

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

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

0
kevin3954

Eine andere Möglichkeit ist, mit dem Schlüsselwortthisdas Objekt einfach inthisabzurufen und seinen Wert zu ändern. Z.B : 

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