Come impostare il valore selezionato sulla selezione utilizzando il plug-in selectpicker da bootstrap

Sto usando il plug -in Bootstrap-Select in questo modo:

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

Ora voglio impostare il valore selezionato su questa selezione quando si fa clic sul pulsante ... qualcosa del genere:

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

Ma non succede niente.

Come posso raggiungere questo obiettivo?

Il valore è selezionato correttamente, ma non l'hai visto perché il plugin nasconde la selezione reale e mostra un pulsante con un elenco non ordinato, quindi, se vuoi che l'utente veda il valore selezionato nella selezione puoi fare qualcosa del genere :

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

Modificare:

Come sottolinea @blushrt, una soluzione migliore è:

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

Modifica 2:

Per selezionare più valori, passare i valori come un array.

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

Questo è tutto ciò che devi fare. Non è necessario modificare direttamente l'html generato di selectpicker, basta modificare il campo di selezione nascosto e quindi chiamare selectpicker ('refresh').

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

Non è necessario alcun aggiornamento se il parametro "val" viene utilizzato per impostare il valore, vedere violino . Utilizzare le parentesi per il valore per abilitare più valori selezionati.

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

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

Questo ha funzionato per me.

In realtà il valore è impostato, ma il selettore non viene aggiornato

Come puoi leggere dalla documentazione
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

Il modo giusto per farlo sarebbe

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

Per più valori è possibile aggiungere un array di valori

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

È possibile impostare il valore selezionato chiamando il metodo val sull'elemento.

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

Questo selezionerà tutti gli elementi in una selezione multipla.

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

i dettagli sono disponibili sul sito: https://silviomoreto.github.io/bootstrap-select/methods/

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

al posto del selettore puoi dare al selettore una classe o un id, ad esempio: $('#mySelect').selectpicker('val',your_value)

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

Una leggera variazione della risposta di blushrt per quando non si hanno valori "hard coded" per le opzioni (ad esempio 1, 2, 3, 4 ecc.)

Supponiamo che tu esegua il rendering di un <select>con i valori delle opzioni che sono GUID di alcuni utenti. Quindi dovrai in qualche modo estrarre il valore dell'opzione per impostarlo su <select>.

Di seguito selezioniamo la prima opzione di select.

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

Lo abbiamo utilizzato in una selezione con la parola chiave multipla <select multiple>. In questo caso nulla è selezionato per impostazione predefinita, ma volevamo che il primo elemento fosse sempre selezionato.

Sulla base dell'ottima risposta di @blushrt, aggiornerò questa risposta. Sto solo usando -

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

funziona se hai precaricato tutto il necessario nel selettore.

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

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

Con "0" il valore dell'elemento che desideri selezionare

Bene, un altro modo per farlo è, con questa parola chiave, puoi semplicemente inserire l'oggetto in questo e manipolarne il valore. Per esempio :

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

Inoltre, puoi chiamarlo semplicemente per multivalore

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

Puoi trovare di più qui https://developer.snapappointments.com/bootstrap-select/methods/

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

Metti semplicemente l'opzione: selezionato per ottenere valore, perché il selettore bootstrap cambia in e appare in modo diverso. Ma seleziona ancora lì selezionato

ID utente Per l'elemento, quindi

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

usa questo e funzionerà:

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