javascript - How to make a "select all" option in html multiple select box using jquery? - Stack Overflow

admin管理员组

文章数量:1400037

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>

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>

• javascript
• jquery
• html
• html-select

Share Improve this question Follow edited Jan 27, 2017 at 10:07 Mohammad 21.5k1616 gold badges5656 silver badges8484 bronze badges asked Jan 27, 2017 at 8:32 brhn.lokbrhn.lok 5311 gold badge11 silver badge88 bronze badges 1

• Wele 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 Commented Jan 27, 2017 at 8:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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>

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./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>

本文标签： javascriptHow to make a quotselect allquot option in html multiple select box using jqueryStack Overflow