CODEWITHSUNDEEP
javascriptjqueryhtml
mattruma
mattruma

Reputation: 16687

How to clear all selected items in a SELECT input using jQuery?

I am think this should be fairly easy, but struggling a bit ... I have a SELECT input element that allows the user to select multiple items. I would like to provide a mechanism for them to clear all selected items, probably will just be a SPAN tag or something similar.

Anyway ... using jQuery, how I would I clear the selection on the SELECT input element so no items are selected.

Upvotes: 35

Views: 127636

Answers (10)

Darmen
Darmen

Reputation: 4881

Try: // Just put # before select to fix this. Works perfect. $("#select option:selected").each(function () { $(this).remove(); //or whatever else });

Upvotes: 6

mbadaro
mbadaro

Reputation: 9

Try that:

$("#selectID").empty();

Worked for me!

Upvotes: -1

Zaki Ahmed
Zaki Ahmed

Reputation: 162

This solution worked for me... 

$('#my-Select').val('').trigger('change');

This works on almost any input type.

Upvotes: 6

roblem
roblem

Reputation: 595

This worked to clear all selected options for me..

$("#selectListName").prop('selectedIndex', -1)

The select list looked like

<select multiple='multiple' id='selectListName'> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option>
</select>

Upvotes: 14

Hexxefir
Hexxefir

Reputation: 1810

Better than this, you can use: 

$("#selectID").empty();

That works on almost anything in the DOM.

Upvotes: -3

Steve
Steve

Reputation: 2588

Only this worked for me:-

$("#selectid").find('option').attr("selected",false) ;

Upvotes: 5

Nick Craver
Nick Craver

Reputation: 630637

In the case of a <select multiple> the .val() function takes/returns an array, so you can simply pass in an empty array to clear the selection, like this:

$("#selectID").val([]);

You can test it out here.

Upvotes: 91

Lourens
Lourens

Reputation: 1518

Maybe 

$('#mySelect option').each(function(i, e)
{
   e.selected = false
});

Upvotes: 0

Poonam Bhatt
Poonam Bhatt

Reputation: 10342

Try this

<select id='select1' ></select>
<input type= 'button' value = 'Clear Selection' id = 'remove' />

$(document).ready(function() {  
   $('#remove').click(function() {  
     return $('#select1 option:selected').remove(); 
   });
 });

Upvotes: -1

Haim Evgi
Haim Evgi

Reputation: 125674

i try something like

$("#my-Select").find('option').attr("selected","") ;

Upvotes: 3

Related Questions