selectpicker 清空选项_在Bootstrap selectpicker上使用jQuery取消选择一个选项

I am using Bootstrap for some UI elements: SelectPicker which allows a user to select multiple options and have it rendered to the screen in paragraph tags. They should also be able to remove a selected option.

This is my code to render the selected options onto the screen, so that each option appears with an 'X' next to it, when it's clicked the selected item is removed from the screen:

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

});

So the problem is the second half of the 'remove' code, while the item does get removed from the output display, it is still selected in the select picker, so when another item is selected - the 'removed' item is re-rendered. Any ideas how i can do this?

The HTML is pretty simple:

ComboBox

解决方案

Here is a working exemple using deselectAll() method.

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

});

UPDATE :

Change

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

by

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