Désélectionner une option à l’aide de jQuery sur un sélecteur de sélection Bootstrap

J’utilise Bootstrap pour certains éléments de l’interface utilisateur: SelectPicker, qui permet à un utilisateur de sélectionner plusieurs options et de l’afficher à l’écran dans les balises de paragraphe. Ils devraient également être en mesure de supprimer une option sélectionnée.

Ceci est mon code pour afficher les options sélectionnées à l’écran, de sorte que chaque option apparaisse avec un ‘X’ à côté. Lorsque vous cliquez dessus, l’élément sélectionné est supprimé de l’écran:

//Render selected item to the screen $('#dataCombo').change(function(){ $('#dataOutput').html(''); var values = $('#dataCombo').val(); for(var i = 0; i < values.length; i += 1) { $('#dataOutput').append("" + values[i] + " x 
") }}); //When the 'X' is clicked, remove that item $("#dataOutput").on('click','.removeable',function(){ $(this).remove(); //this removes the item from the screen //Next i need to unselect it from dataCombo selectpicker var foo = $(this); $('#dataCombo').find('[value=foo]').remove(); console.log(foo); $('dataCombo').selectpicker('refresh'); });

Le problème est donc la deuxième moitié du code de suppression, bien que l’élément soit supprimé de l’affichage en sortie, il est toujours sélectionné dans le sélecteur de sélection. Ainsi, lorsqu’un autre élément est sélectionné, l’élément “supprimé” est rendu de nouveau. . Des idées comment je peux faire ceci?

Le HTML est assez simple:

 ComboBox

Voici un exemple de travail utilisant la méthode deselectAll() .

Bootply : http://www.bootply.com/124259

JS :

 //Render selected item to the screen $('#dataCombo').change(function(){ $('#dataOutput').html(''); var values = $('#dataCombo').val(); for(var i = 0; i < values.length; i += 1) { $('#dataOutput').append("" + values[i] + " x 
") }}); //When the 'X' is clicked, remove that item $("#dataOutput").on('click','.removeable',function(){ $(this).remove(); //this removes the item from the screen //Next i need to unselect it from dataCombo selectpicker var foo = $(this); $('#dataCombo').find('[value='+foo.find('.reel').html()+']').remove(); // $('#dataCombo').val( ); $values = $('#dataCombo').val(); $('#dataCombo').selectpicker('deselectAll'); $('#dataCombo').selectpicker('val', $values ); $('#dataCombo').selectpicker('refresh'); }); $("#dataCombo").selectpicker({ multiple:true });

MISE À JOUR :

Changement

 $('#dataCombo').find('[value='+foo.find('.reel').html()+']').remove();

par

 $('#dataCombo').find('[value='+foo.find('.reel').html()+']').prop('selected', false);

J’ai eu la solution de code suivant. Essayez-le

 $("#listID").val('').sortinggger('change');

Puisque le code ci-dessous fonctionne pour les boîtes de sélection normales

 $('#myselect option').prop("selected", false);

J’ai essayé ci-dessous le code avec la réponse de UWU_SANDUN et cela fonctionne également bien

 $('#myselect option').prop("selected", false).sortinggger('change');