Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unselect an option using jQuery on a Bootstrap selectpicker

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>
like image 361
Hagbard Avatar asked Mar 24 '14 10:03

Hagbard


4 Answers

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);
like image 187
BENARD Patrick Avatar answered Sep 21 '22 13:09

BENARD Patrick


I got solution from following code.Try it

$("#listID").val('').trigger('change');
like image 25
UWU_SANDUN Avatar answered Sep 20 '22 13:09

UWU_SANDUN


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');
like image 22
Johan Koele Avatar answered Sep 18 '22 13:09

Johan Koele


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>
like image 21
japes Sophey Avatar answered Sep 19 '22 13:09

japes Sophey