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

97

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?

jcvegan
quelle
1
Ich bin nicht sicher, was Sie erreichen möchten, der Wert wird festgelegt, sobald Benutzer auf diese Option in der Auswahl klicken
Tom Sarduy
Ja, weil der Wert wirklich von einer Methode bei einem Ajax-Aufruf stammt ...
jcvegan
1
Der Wert ist richtig ausgewählt, aber Sie haben ihn nicht gesehen, weil das Plugin die echte Auswahl verbirgt und eine Schaltfläche mit einer ungeordneten Liste anzeigt
Tom Sarduy
Ja, ich weiß das, aber wie man es behebt ... ich meine ... der Benutzer muss die Auswahl auf diesem Steuerelement sehen
jcvegan

Antworten:

148

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.

Tom Sarduy
quelle
29
Eine bessere Lösung wäre einfach: Auf $('select[name=selValue]').val(1);$('.selectpicker').selectpicker('refresh');diese Weise ändern Sie nur die versteckte Auswahl, indem Sie durch Auswahl von Auswahlauswahl ('Aktualisieren') die Schaltfläche neu zeichnen.
blushrt
Ja, dieser Weg ist besser @blushrt, hinzugefügt zu meiner Antwort
Tom Sarduy
Ich habe das gleiche Problem, dass ich keine vorgewählten Werte auswählen kann, die der Benutzer privat ausgewählt hat.
Srikanth Pullela
Ist es notwendig, den Selectpicker danach zu aktualisieren? @ TomSarduy
Ankit Suthar
@ankitsuthar, ja
Tom Sarduy
72
$('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').

blushrt
quelle
8
Dies sollte die richtige Antwort sein! Das Aufrufen des Befehls .selectpicker ('refresh') ist entscheidend für die Auswahl und Aktualisierung des aktuellen Werts einer Dropdown-Liste mit Selectpicker-Unterstützung. Bitte beachten Sie, dass das Aufrufen der Aktualisierung für ALLE .selectpicker-Elemente langsam sein kann. Wenn Sie das zu bedienende Objekt kennen, wird die Aktualisierung in dieser einzelnen Auswahlliste bevorzugt aufgerufen.
Nocarrier
$('.selectpicker').selectpicker('refresh'); kann Ihre Leistung töten, wenn Sie viele ausgewählte Picker auf einer Seite haben
Michel
Ein weiteres Problem, das ich gefunden habe, ist: Dies wird die Auswahl nicht ankreuzen.
Sajeer Babu
43
$('.selectpicker').selectpicker('val', YOUR_VALUE);
Jesterhead
quelle
Ich habe Ihre Lösung ausprobiert. In meiner Auswahl wird jedoch "Nichts ausgewählt" angezeigt, obwohl ich einen Wert ausgewählt habe und diesen von der Ressource erhalte, in der ich Daten speichere.
Shilpi Jaiswal
16

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]); 
cederlof
quelle
10
$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
   $('select[name=selValue]').change();
});

Das hat bei mir funktioniert.

Janith Widarshana
quelle
3

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/

Awanish Kumar
quelle
Ich habe Ihre Lösung ausprobiert. In meiner Auswahl wird jedoch "Nichts ausgewählt" angezeigt, obwohl ich einen Wert ausgewählt habe und diesen von der Ressource erhalte, in der ich Daten speichere.
Shilpi Jaiswal
3

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

vivek korada
quelle
2
var bar= $(#foo).find("option:selected").val();
abdul
quelle
1

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.

Kristian Vinther
quelle
1

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.

Yonatan
quelle
1
$('.selectpicker').selectpicker("val", "value");
Abd Abughazaleh
quelle
Abd, ich habe ein PHP-Skript, das das JSON-Format an Ajax übergibt, wobei das JSON-Format wie folgt lautet: "Auto": "8", "Farben": "Rot, Blau, Weiß"} . In diesem Fall, wie kann das Objekt "Farben" wie in selectpicker markiert mit dieser Methode $ ('. Selectpicker') eingefügt werden. Selectpicker ("val", "data.colors"); ?
Michel Xavier
0
$('.selectpicker').selectpicker('val', '0');

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

kevin3954
quelle
0

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);
    });
Mohd Naved
quelle
0
$('.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

Fabio Almeida
quelle
-1

Benutzer-ID Für Element also

document.getElementById('selValue').value=Your Value;
$('#selValue').selectpicker('refresh');
AB Schamane
quelle
-2

Verwenden Sie dies und es wird funktionieren:

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