Comment définir la valeur sélectionnée lors de la sélection à l'aide du plug-in Selectpicker de bootstrap

J'utilise le plugin Bootstrap-Select 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 sur cette sélection lorsque vous cliquez sur le bouton ... quelque chose comme ceci:

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

Mais rien ne se passe.

Comment puis-je atteindre cet objectif?

La valeur est correctement sélectionnée, mais vous ne l'avez pas vue car le plugin cache la sélection réelle et affiche un bouton avec une liste non ordonnée, donc, si vous voulez que l'utilisateur voie 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);

Éditer:

Comme le souligne @blushrt, une meilleure solution est:

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

Modifier 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 html généré de selectpicker, il suffit de changer le champ de sélection caché, puis d'appeler le selectpicker ('refresh').

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

Aucune actualisation 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 sélecteur 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 procéder serait

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

Pour plusieurs valeurs, vous pouvez ajouter un tableau de valeurs

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

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/

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

à la place du sélecteur, vous pouvez vous donner le sélecteur de classe ou d'id par exemple: $('#mySelect').selectpicker('val',your_value)

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 (c'est-à-dire 1, 2, 3, 4, etc.)

Supposons que vous restituiez un <select>avec les valeurs d'options étant les GUID de certains utilisateurs. Ensuite, vous devrez en quelque sorte extraire 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é.

Sur la base de la bonne réponse de @blushrt, je mettrai à jour cette réponse. Juste en utilisant -

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

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

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

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

Le «0» étant la valeur de l'élément que vous souhaitez sélectionner

Eh bien, une autre façon de le faire est, avec ce mot - clé, vous pouvez simplement obtenir l'objet dans celui-ci et manipuler sa valeur. Par exemple :

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

En outre, vous pouvez simplement appeler cela pour plusieurs valeurs

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

Vous pouvez en trouver plus ici https://developer.snapappointments.com/bootstrap-select/methods/

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

Il suffit de mettre l'option: sélectionné pour obtenir une valeur, car le sélecteur de bootstrap change en et apparaît de manière différente. Mais sélectionnez toujours là sélectionné

ID utilisateur Pour l'élément, puis

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

utilisez ceci et ça fonctionnera:

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