Comment définir la valeur sélectionnée sur select en utilisant le plug-in selectpicker de bootstrap

J’utilise le plugin Bootstrap-Select comme ceci:

HTML :

 Val 1 Val 2 Val 3 Val 4  

Javascript :

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

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

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

Mais rien ne se passe.

Comment puis-je atteindre cet objective?

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. :

 //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 atsortingbute for the real select $('select[name=selValue]').val(1); 

Modifier:

Comme @blushrt le souligne, une meilleure solution est:

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

Edit 2:

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

 $('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, changez simplement le champ de sélection masqué, puis appelez le selectpicker (‘refresh’).

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

Aucun rafraîchissement n’est nécessaire si le paramètre “val” est utilisé pour définir la valeur, voir fiddle . Utilisez des crochets pour la valeur afin d’activer plusieurs valeurs sélectionnées.

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

Cela a fonctionné pour moi.

En fait, votre valeur est définie, mais votre selectpicker 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 le faire serait

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

Pour plusieurs valeurs, vous pouvez append un tableau de valeurs

 $('.selectpicker').selectpicker('val', [1 , 2]); 
 var bar= $(#foo).find("option:selected").val(); 

Une légère variation de la réponse de blushrt lorsque vous n’avez pas de valeurs “codées en dur” pour les options (par exemple, 1, 2, 3, 4, etc.)

Supposons que vous rendiez un avec les valeurs des options étant des GUID de certains utilisateurs. Ensuite, vous devrez extraire en quelque sorte la valeur de l’option pour la définir sur .

Dans la suite, nous sélectionnons la première option de la sélection.

HTML :

  

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  

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

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 dans une sélection multiple.

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

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

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

Avec le ‘0’ étant la valeur de l’élément que vous voulez sélectionner

Eh bien, un autre devait le faire est, avec ce mot clé, vous pouvez simplement obtenir l’object et manipuler sa valeur. Par exemple :

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

ID utilisateur Pour l’élément, alors

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

utilise ça et ça va marcher:

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