How can I select all options of multi-select select box on click

Question

This is my HTML   lt select name  countries  id  countries  MULTIPLE size  8  gt      lt option value  UK  gt UK lt  option gt      lt option value  US  gt US lt  option gt      lt option value  Canada  gt Canada lt  option gt      lt option value  France  gt France lt  option gt      lt option value  India  gt India lt  option gt      lt option value  China  gt China lt  option gt   lt  select gt   lt br   gt   lt input type  button  id  select all  name  select all  value  Select All  gt    When user click on  Select All  button  I want all the options in the select box to be selected      select all   click  function

User · Accepted Answer

Try this       select all   click function             countries option   prop  selected   true         And here s a live demo

User · Answer

I m able to make it in a native way   jsfiddle  Hope it will help   Post improved answer when it work  and help others     function                example   multiselect                   checkAllText    Select All               uncheckAllText    Deselect All               selectedText  function numChecked  numTotal  checkedItems                 return numChecked     of     numTotal     checked                              minWidth  325                 example   multiselect  checkAll               http   jsfiddle net shivasakthi18 25uvnyra

User · Answer

Give selected attribute to all options like this     countries option   attr  selected    selected     Usage      select all   click  function             countries option   attr  selected    selected          Update In case you are using 1 6   better option would be to use  prop   instead of  attr       select all   click  function             countries option   prop  selected   true

User · Answer

try      select all   click  function             countries option   each function              this  attr  selected    selected                  this will give you more scope in the future to write things like       select all   click  function             countries option   each function            if   this  attr  something       omit parameter                           this  attr  selected    selected                            Basically allows for you to do a select all EU members or something if required later down the line

User · Answer

try this   call a method selectAll   onclick and write a function of code as follows  function selectAll            id   find  option   each function this          this  attr  selected    selected

User · Answer

For jQuery versions 1 6  then       select all   click  function             countries option   prop  selected   true         Or for older versions       select all   click  function             countries option   attr  selected    selected          LIVE DEMO

User · Answer

If you are using JQuery 1 9  then above answers will not work in Firefox   So here is a code for latest jquery which will work in all browsers   See live demo  Here is the code  var select ids         document  ready function e           select myselect option   each function index  element            select ids push   this  val                 function selectAll            select myselect   val select ids      function deSelectAll            select myselect   val          Hope this will help you

User · Answer

Working Demo      select all   click  function            select countries  gt  option   prop  selected    selected          If you use jQuery older than 1 6       select all   click  function            select countries  gt  option   attr  selected    selected

[javascript] How can I select all options of multi-select select box on click?

Examples related to javascript

Examples related to jquery

Examples related to html