JQuery select all selection options to select multiple clicks

Question

This is my HTML.

<select name="countries" id="countries" MULTIPLE size="8"> <option value="UK">UK</option> <option value="US">US</option> <option value="Canada">Canada</option> <option value="France">France</option> <option value="India">India</option> <option value="China">China</option> </select> <br /> <input type="button" id="select_all" name="select_all" value="Select All"> 

When the user clicks the "Select All" button, I want all the options in the selection window to be selected

 $('#select_all').click( function() { // ? }); 

Answer 1

Try the following:

 $('#select_all').click(function() { $('#countries option').prop('selected', true); }); 

And here is a live demonstration .

Answer 2

For jQuery versions 1.6+, then

 $('#select_all').click( function() { $('#countries option').prop('selected', true); }); 

Or for older versions:

 $('#select_all').click( function() { $('#countries option').attr('selected', 'selected'); }); 

Live demo

Answer 3

try it,

call the selectAll () onclick method and write a code function as follows

 function selectAll(){ $("#id").find("option").each(function(this) { $(this).attr('selected', 'selected'); }); } 

Answer 4

Set the selected attribute to all parameters, such as

 $('#countries option').attr('selected', 'selected'); 

Using:

 $('#select_all').click( function() { $('#countries option').attr('selected', 'selected'); }); 

---

Update

If you use 1.6+, the best option would be to use .prop() instead of .attr()

 $('#select_all').click( function() { $('#countries option').prop('selected', true); }); 

Answer 5

Working demo

 $('#select_all').click( function() { $('select#countries > option').prop('selected', 'selected'); }); 

If you are using jQuery older than 1.6:

 $('#select_all').click( function() { $('select#countries > option').attr('selected', 'selected'); }); 

Answer 6

If you are using jQuery 1.9+, then the above answers will not work in Firefox.

So here is the code for the latest jquery that will work in all browsers.

Watch a live demo

Here is the code

 var select_ids = []; $(document).ready(function(e) { $('select#myselect option').each(function(index, element) { select_ids.push($(this).val()); }) }); function selectAll() { $('select#myselect').val(select_ids); } function deSelectAll() { $('select#myselect').val(''); } 

Hope this helps you ... :)

Answer 7

to try

 $('#select_all').click( function() { $('#countries option').each(function(){ $(this).attr('selected', 'selected'); }); }); 

this will give you more options in the future for writing things like

 $('#select_all').click( function() { $('#countries option').each(function(){ if($(this).attr('something') != 'omit parameter') { $(this).attr('selected', 'selected'); } }); }); 

Basically allows you to select all EU members or something later if necessary on line

Answer 8

I can do it on @jsfiddle's native path. Hope this helps.

Post an improved answer when it works and help others.

 $(function () { $(".example").multiselect({ checkAllText : 'Select All', uncheckAllText : 'Deselect All', selectedText: function(numChecked, numTotal, checkedItems){ return numChecked + ' of ' + numTotal + ' checked'; }, minWidth: 325 }); $(".example").multiselect("checkAll"); }); 

http://jsfiddle.net/shivasakthi18/25uvnyra/