CODEWITHSUNDEEP
jqueryhtml
user1881090
user1881090

Reputation: 741

how to select and deselect all options in a select box

<select name="remaintextarea" id="studentremain" size="10">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

<button type='button' id='selectall'>Select All</button>
<button type='button' id='deselectall'>De-Select All</button>

Got a select box above, select all and de-select all buttons above. My question is by using jquery, how can I get the button to select all the options and deselect all the options in the select box above when the relevant buttons are clicked on?

Below I just have the click handlers for both buttons:

$('#selectall').click(function() {

});   

$('#deselectall').click(function() {

});

Upvotes: 11

Views: 53710

Answers (5)

Sobin Augustine
Sobin Augustine

Reputation: 3765

Most of the answer were outdated, Here selecting and deselecting in two different ways

$('#selectall').click(function() {
    $("#studentremain option").prop("selected", true);
});   

$('#deselectall').click(function() {
    $("#studentremain option").val([]);
});

Upvotes: 0

gtu
gtu

Reputation: 966

Somehow the answers above did not work for me. Seems that you have to use properties instead of attributes. Here is the code:

$('#selectall').click(function() {
    $('select#studentremain option').prop("selected",true);
});   

$('#deselectall').click(function() {
    $('select#studentremain option').prop("selected",false);
});

Documentation says that selected attribute only specifies that an option should be pre-selected when the page loads. But is not set when the actual option is selected by the user. Source

Upvotes: 5

Tony Day
Tony Day

Reputation: 2170

You need to add the multiple attribute to the select element, and then you can:

$('#selectall').click(function() {
    $('select#studentremain option').attr("selected","selected");
});   

$('#deselectall').click(function() {
    $('select#studentremain option').removeAttr("selected");
});

Upvotes: 25

Jonathan Schroeder
Jonathan Schroeder

Reputation: 51

Add the multiple attribute to your select box first so that you can have multiple values selected and then something like this would be sufficient since you're using jQuery.

//for selection of all.
$('#studentremain option').attr('selected','selected');

//for removal of selection.
$('#studentremain option').removeAttr('selected');

You can try prop and removeProp in the place of attr.

Upvotes: 3

phnkha
phnkha

Reputation: 7872

Try this demo

Must add multiple="multiple" in select element

HTML: 

<select multiple="multiple" name="remaintextarea" id="studentremain" size="10">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<button type='button' id='selectall'>Select All</button>
<button type='button' id='deselectall'>De-Select All</button>

JS:

$('#selectall').click(function() {
    $('#studentremain > option').attr("selected", "selected");
});   

$('#deselectall').click(function() {
    $('#studentremain > option').removeAttr("selected");
});

Upvotes: 8

Related Questions