Comment définir la valeur sélectionnée sur la sélection en utilisant le plugin selectpicker de bootstrap ?

Question

J'utilise le Bootstrap-Select plugin comme celui-ci :

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

Maintenant, je veux définir la valeur sélectionnée à cette sélection lorsque le bouton est cliqué ... quelque chose comme ceci :

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

Mais rien ne se passe.

Comment puis-je y parvenir ?

Answer 1

La valeur est correctement sélectionnée, mais vous ne l'avez pas vu parce que le plugin cache la vraie sélection et montre un bouton avec une liste non ordonnée, donc, si vous voulez que l'utilisateur voit la valeur sélectionnée sur la sélection vous pouvez faire quelque chose comme ceci :

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

Edit :

Comme le souligne @blushrt, une meilleure solution est :

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

Edit 2 :

Pour sélectionner plusieurs valeurs, passez les valeurs sous forme de tableau.

Answer 2

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

C'est tout ce que vous devez faire. Il n'est pas nécessaire de modifier directement le code html généré par le selectpicker, il suffit de modifier le champ de sélection caché, puis d'appeler la fonction selectpicker('refresh').

Answer 3

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

Answer 4

Aucun rafraîchissement n'est nécessaire si le paramètre "val" est utilisé pour définir la valeur, voir violon . Utilisez des parenthèses pour la valeur afin d'activer plusieurs valeurs sélectionnées.

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

Answer 5

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

Cela a marché pour moi.