web-dev-qa-db-fra.com

Comment définir la valeur sélectionnée sur select en utilisant le plugin selectpicker à partir de bootstrap

J'utilise le Bootstrap-Select plugin comme ceci:

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 atteindre cet objectif?

jquerytwitter-bootstrapbootstrap-select
78
jcvegan

La valeur est correctement sélectionnée, mais vous ne l'avez pas vue car le plug-in masque la sélection réelle et affiche un bouton avec une liste non ordonnée. Ainsi, si vous souhaitez que l'utilisateur voie la valeur sélectionnée sur la sélection, vous pouvez procéder de la sorte. :

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

Modifier:

Comme @blushrt le fait remarquer, une meilleure solution est:

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

Edit 2:

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

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

C'est tout ce que vous devez faire. Pas besoin de changer directement le code HTML généré par selectpicker, il suffit de changer le champ de sélection masqué, puis d'appeler le sélecteur de sélection ('refresh').

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

Aucune actualisation n'est nécessaire si le paramètre "val" est utilisé pour définir la valeur, voir violon . Utilisez des crochets pour que la valeur active plusieurs valeurs sélectionnées.

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

Cela a fonctionné pour moi.

9
Janith Widarshana

En fait, votre valeur est définie, mais votre sélecteur de sélection n'est pas actualisé.

Comme vous pouvez le lire dans la documentation 
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

La bonne façon de faire cela serait

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

Pour plusieurs valeurs, vous pouvez ajouter un tableau de valeurs

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

Vous pouvez définir la valeur sélectionnée en appelant la méthode val sur l'élément.

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

Cela sélectionnera tous les éléments d’une sélection multiple.

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

les détails sont disponibles sur le site: https://silviomoreto.github.io/bootstrap-select/methods/

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

Une légère variation de blushrt's answer pour ne pas avoir de valeur "codée en dur" pour les options (c'est-à-dire 1, 2, 3, 4, etc.)

Supposons que vous restituiez un <select> avec des valeurs d’options correspondant aux GUID de certains utilisateurs. Ensuite, vous devrez extraire d’une manière ou d’une autre la valeur de l’option afin de la définir sur le <select>.

Dans ce qui suit, nous sélectionnons la première option de la sélection.

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

Nous l'avons utilisé dans une sélection avec le mot clé multiple <select multiple>. Dans ce cas, rien n'est sélectionné par défaut, mais nous voulions que le premier élément soit toujours sélectionné.

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

Il suffit de mettre l’option: selected pour obtenir une valeur, car le bootstrap selectpicker se modifie et apparaît de différentes manières. Mais sélectionnez toujours là sélectionné

0
Fabio Almeida

Basé sur l'excellente réponse de @blushrt, je vais mettre à jour cette réponse. Juste en utilisant -

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

fonctionne si vous avez préchargé tout ce dont vous avez besoin pour le sélecteur.

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

"0" étant la valeur de l'élément que vous voulez sélectionner

0
kevin3954

Une autre façon de le faire est que, avecthismot-clé, vous pouvez simplement obtenir l'objet dansthiset manipuler sa valeur. Par exemple : 

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