CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-4
bharath gorityala
bharath gorityala

Reputation: 81

How can i remove all options in Bootstrap Multiselect using jQuery?

I want to remove all Bootstrap Multiselect options dynamically using jQuery. How can i remove the same?

Code I have tried:

$("#userGroupDbKeyAjax2 option").remove();

But it's not working in bootstrap multi-select.

Upvotes: 2

Views: 15245

Answers (3)

Tristanisginger
Tristanisginger

Reputation: 2691

$('.selectpicker').selectpicker('deselectAll');

Docs: https://developer.snapappointments.com/bootstrap-select/methods/

Original: https://stackoverflow.com/a/53763924/1695062

Upvotes: 1

malouan
malouan

Reputation: 91

First of all you should know that your query returns a jQuery Object. Which means, that your <option> are stored in an array.

You could go ahead like this: 

var $multiSelectOptions = $('#userGroupDbKeyAjax2 option');

# option 1
$.each($multiSelectOptions, function(index, element) {
    element.remove();
});

# option 2
$multiSelectOptions.each(function(index, element) {
    element.remove();
});

The main advantage of this method is, that you can easily select which options to remove.

Upvotes: 1

Shafiqul Islam
Shafiqul Islam

Reputation: 5690

try this code which when you click remove option then remove all option from select. this is demo code so update as your requirement or add your html code and relative jQuery then i will add full code 

function remove(){
$("#userGroupDbKeyAjax2").empty(); 
// you can use also this $('#userGroupDbKeyAjax2').html('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="userGroupDbKeyAjax2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<span onclick ="remove()">Click to remove</span>

Upvotes: 5

Related Questions