How to make a "select all" option in html multiple select box using jquery?

Question

I am making a html form which includes a multiple select box. What i want to do is to make a "select all" option in multiple select box so that if the user user click on that option all the options of select box will automatically gets selected if user deselect it all other option gets deselected. any ideas using jQuery?

<select MULTIPLE>
   <option>Select All</option>
   <option>value1</option>
   <option>value2</option>
   <option>value3</option>
   <option>value4</option>
   <option>value5</option>
   <option>value6</option>
</select>

Welcome to Stack Overflow, please take some time to follow the Stack Overflow tour and read about How do I ask a good question? Also provide us the relevant code you wrote for your question (You can also read How to create a Minimal, Complete, and Verifiable example) — Dipiks
– Dipiks, Commented Jan 27, 2017 at 8:34

Mohammad · Accepted Answer · 2017-01-27 09:54:37Z

3

I store status (selected/unselected) of options in data-selected attribute on click event. Then use it to select/unselect all option of listbox.

$("select").on("click", function(){      
  if ($(this).find(":selected").text() == "Select All"){
    if ($(this).attr("data-select") == "false")
      $(this).attr("data-select", "true").find("option").prop("selected", true);
    else
      $(this).attr("data-select", "false").find("option").prop("selected", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple data-select="false">>
  <option>Select All</option>
  <option>value1</option>
  <option>value2</option>
  <option>value3</option>
  <option>value4</option>
  <option>value5</option>
  <option>value6</option>
</select>

edited Jan 27, 2017 at 9:54

answered Jan 27, 2017 at 9:28

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

brhn.lok Over a year ago

it selects all values when i click on any other value.

Mohammad Over a year ago

@brhn.lok Oh, i think you want select all on click of any option. I edited it.

brhn.lok Over a year ago

no @mohammad i want that if user want to select all the options so he/she do not have to ctlr+click all option the select all option will be used as trigger for selecting all other options

Dipiks · Accepted Answer · 2017-01-27 08:42:43Z

1

You can do something like this using jQuery:

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

$('#unselectAll').click(function() {
  $('#persons option').prop('selected', false);
});

input[type=button] {
  width: 100px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="selectAll" name="selectAll" value="Select All"><br />
<input type="button" id="unselectAll" name="unselectAll" value="Unselect All"><br /><br />


<select name="persons" id="persons" MULTIPLE size="8">
   <option value="FR">Franck</option>
   <option value="GE">Georges</option>
   <option value="DA">David</option>
   <option value="LU">Luc</option>
   <option value="DO">Donald</option>
   <option value="FR">FRANCOIS</option>
</select>

answered Jan 27, 2017 at 8:42

Dipiks

3,9482 gold badges26 silver badges39 bronze badges

1 Comment

brhn.lok Over a year ago

thanks @Gille Q. but i dont want any outsoide buttons i want an select all option tag in select box

Collectives™ on Stack Overflow

How to make a "select all" option in html multiple select box using jquery?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related