Unselect an option using jQuery on a Bootstrap selectpicker

Question

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("<p class='removeable'>" + values[i] + " x </p>")
}});

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

<h6>ComboBox</h6>
<select id="dataCombo"  class="selectpicker" multiple>
</select>

Answer 1

Here is a working exemple using deselectAll() method.

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("<p class='removeable'><span class='reel'>" + values[i] + "</span> x </p>")
}});

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

Answer 2

I got solution from following code.Try it

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

Answer 3

Since the code below works for normal select boxes

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

I tried below code with the answer from UWU_SANDUN and it also works nicely

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

Answer 4

No need to use JQuery. Assumption that user is using bootstrap-select ... https://developer.snapappointments.com/bootstrap-select/

Make the select into a 'multiple' select list and set 'data-max-options' to 1. For example:

               <select class="selectpicker" title="Select..." multiple data-max-options="1">
                                <option>Hello Title 1</option>
                                <option>Hello Title 2</option>
                                <option>Hello Title 3</option>
               </select>