Alright, here is a quick example of how to use jQuery to select all of the items in a multiple-option select box.
//Javascript part assuming that you have already included jquery.js in your header $(document).ready(function() { $("#select_all_col_managers").click(function() { $("#col_manager_list").each(function(){ $("#col_manager_list option").attr("selected","selected"); }); }) ; $("#unselect_all_col_managers").click(function() { $("#col_manager_list").each(function(){ $("#col_manager_list option").removeAttr("selected"); }); }) ; }); |
and now for the HTML part…
Filter by Collection Manager:
<select class="select_multiple" id="col_manager_list" multiple="multiple" name="RTCLMG[]">
<option>Must Select One</option>
<option value="<?php echo $value['col_manager']?>"></option>
</select>
<a href="#" id="select_all_col_managers">Select All</a> <!-- this is the select all part -->
<a href="#" id="unselect_all_col_managers">Unselect All</a><!-- this is the unselect all part --> |
Please note that I am using Code Igniter with this.
UPDATE September 23, 2011:
Raphael posted a comment here that there is a cleaner and better version of doing this.
(function($){ // Select all $('form select option').prop('selected',true); })(jQuery) and for disabling all selections: (function($){ // Select all $('form select option').prop('selected',false); })(jQuery) |
He was also kind enough to link us to the jQuery docs. http://api.jquery.com/prop/. Thanks sir!
twitter.com/wenbert
You can also use jquery selectors to reduce it:
$(‘#col_manager_list *’).attr(‘selected’,”)
wow. that is short! i will have to try that. thanks for sharing peter
Is it possible to select everything in a select multiple when the user click in the submit button?
Hi Paulo,
I have not tried this code yet, but it should look something like this:
$(document).ready(function() { $("#id_of_submit_button").click(function() { $("#col_manager_list").each(function(){ $("#col_manager_list option").attr("selected","selected"); }); $("#id_of_form").submit; }) ; });I knew there was a super easy way to do this but couldn’t think of it so I Googled it and found this page.
$(“#col_manager_list *”).attr(“selected”,”selected”); totally worked, good call on that one.
$(‘#col_manager_list>option[selected!=true]‘).attr(‘selected’, ‘selected’);
This is faster in case you have a list with some options already selected.
@Florin D, thanks for the tip!
Hi,
(sorry for my English
I have got question: If I want select only one option (value of this option I save to variable for example called “myid”). how?
thanks
This is great tip! Thanks.
I’m so glad I found this site…Keep up the good work
I have tried the options above and it works fine in Firefox but I’m having some issues in IE. I have two multi-option select boxes, of which I am selecting from one select box to the other. The code looks like this:
$(“#btnAdd”).click(function(){
$(“#lbFeeder option:selected”).appendTo(“#lbFeederSelected”);
$(“#lbFeederSelected *”).removeAttr(“selected”);
});
In IE the call to removeAttr(“selected”) only deselects the first option in the list. Any help would be great!!
Cheers
@RyanJ, I am not sure what is the problem. IE also gives me headaches — most of the time
I suggest that you also post your question here: http://www.stackoverflow.com 
Thanks!
Thanks for this understood article. good works.
Thanks a bunch. It is very helpful
sorry for reviving this article, but nowadays jquery provides a better – read cleaner – method for checking properties, not only limited to select options but also for checkboxes
usage is fairly simple:
(function($){
// Select all
$('form select option').prop('selected',true);
})(jQuery)
and for disabling all selections:
(function($){
// Select all
$('form select option').prop('selected',false);
})(jQuery)
more on this topic may be found here: jQuery API dox
hth
Thanks Raphael. I have updated the post accordingly.