Jak ustawić wybraną wartość na select przy użyciu wtyczki selectpicker z bootstrap

Używam wtyczki Bootstrap-Select w następujący sposób:

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

Teraz chcę ustawić wartość wybraną do tego wyboru po kliknięciu przycisku ... coś takiego:

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

Ale nic się nie dzieje.

Jak mogę to osiągnąć?

Wartość jest poprawnie wybrana, ale jej nie widzieliście, ponieważ wtyczka ukrywa prawdziwy wybór i pokazuje przycisk z nieuporządkowaną listą, więc jeśli chcesz, aby użytkownik zobaczył wybraną wartość na zaznaczeniu, możesz zrobić coś takiego :

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

Edytować:

Jak wskazuje @blushrt, lepszym rozwiązaniem jest:

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

Edycja 2:

Aby wybrać wiele wartości, przekaż je jako tablicę.

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

To wszystko, co musisz zrobić. Nie ma potrzeby, aby bezpośrednio zmieniać wygenerowany kod HTML narzędzia selectpicker, wystarczy zmienić ukryte pole wyboru, a następnie wywołać funkcję selectpicker („odśwież”).

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

Odświeżanie nie jest potrzebne, jeśli parametr-val jest używany do ustawiania wartości, zobacz fiddle . Użyj nawiasów jako wartości, aby włączyć wiele wybranych wartości.

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

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

To zadziałało dla mnie.

W rzeczywistości twoja wartość jest ustawiona, ale selektor nie jest odświeżany

Jak możesz przeczytać w dokumentacji
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

Byłby to właściwy sposób

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

W przypadku wielu wartości można dodać tablicę wartości

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

Możesz ustawić wybraną wartość, wywołując metodę val na elemencie.

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

Spowoduje to zaznaczenie wszystkich elementów w wielokrotnym wyborze.

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

szczegóły są dostępne na stronie: https://silviomoreto.github.io/bootstrap-select/methods/

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

zamiast selektora możesz podać selektorowi klasę lub id, na przykład: $('#mySelect').selectpicker('val',your_value)

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

Niewielkie odchylenie odpowiedzi blushrt, gdy nie masz „zakodowanych na stałe ” wartości opcji (np. 1, 2, 3, 4 itd.)

Powiedzmy, że renderujesz a <select>z wartościami opcji będącymi identyfikatorami GUID niektórych użytkowników. Wtedy będziesz musiał jakoś wyodrębnić wartość opcji, aby ustawić ją na <select>.

Poniżej wybieramy pierwszą opcję wyboru.

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

Użyliśmy tego w wyborze ze słowem kluczowym multiple <select multiple>. W tym przypadku nic nie jest wybrane domyślnie, ale chcieliśmy, aby zawsze był wybrany pierwszy element.

W oparciu o świetną odpowiedź @blushrt zaktualizuję tę odpowiedź. Po prostu używam -

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

działa, jeśli wstępnie załadowałeś wszystko, czego potrzebujesz do selektora.

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

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

Z „0” jest wartością pozycji, którą chcesz wybrać

Innym sposobem jest użycie tego słowa kluczowego, możesz po prostu pobrać obiekt w tym i manipulować jego wartością. Np .:

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

Możesz też po prostu nazwać to dla wielu wartości

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

Możesz znaleźć więcej tutaj https://developer.snapappointments.com/bootstrap-select/methods/

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

Po prostu umieść opcję: wybraną, aby uzyskać wartość, ponieważ selektor ładowania początkowego zmienia się i pojawia się w inny sposób. Ale wybierz nadal tam wybrane

W takim razie identyfikator użytkownika dla elementu

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

użyj tego i zadziała:

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