jQuery: Select all options in a Multiple-option Select Box
Filed Under (General) by Wenbert on 04-02-2008
Tagged Under : Code Igniter, Javascript, jquery
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> value="< ?=$value['col_manager']?>">< ?=$value['col_manager']?> < / select>
< a href="#" id="select_all_col_managers">Select All< / a>
< a href="#" id="unselect_all_col_managers">Unselect All< / a>
Please note that I am using Code Igniter with this.
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; }) ; });