HTML multi select tag how to select multiple options via click event

Question

I dont want to have to ctrl+click in order to select multiple somethings from the list. all i want is to click something - it is selected. or click again - it is deselected. sounds super simple but i have been trying for a while and i cant get it to work. here is an example of my list. the list of options is generated on load so i dont know how many options ill have but if i can just get index onclick and use that to set selected=true then that will solve my problem. If anyone can help.

example of the select list.

  <select id="test" multiple>
      <option selected value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
  </select>
  <script>
     $("#test option").click(function () {

        //ToDo
    });
  </script>

Onur Uslu · Accepted Answer · 2018-06-22 15:45:48Z

1

Note: Ctrl key and dragging the mouse for multiple selections don't work with this code :(

var selections;
$("#test").mousedown(function(e) {
  selections = $(this).val();

}).click(function() {

  if (selections == null) {
    var selected = -1;
    selections = [];
  } else
    var selected = selections.indexOf($.isArray($(this).val()) ? $(this).val()[$(this).val().length - 1] : $(this).val());

  if (selected >= 0)
    selections.splice(selected, 1);
  else
    selections.push($(this).val()[0]);

  $('#test option').each(function() {
    $(this).prop('selected', selections.indexOf($(this).val()) >= 0);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" multiple>
  <option selected value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

edited Jun 22, 2018 at 15:45

answered Jun 22, 2018 at 15:22

Onur Uslu

1,1591 gold badge9 silver badges13 bronze badges

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

4 Comments

Heretic Monkey Over a year ago

The code in the each could be just $(this).prop('selected', selections.indexOf($(this).val()) >= 0);. But this code also depends on the values being unique on their first character. I would just use the entire value instead.

j08691 Over a year ago

I don't seem to be able to unselect all options.

Onur Uslu Over a year ago

@MikeMcCaughan Thanks for the suggestion, I updated the code... When I try it with values which have same first characters, it works fine. Is there something I cannot see?

zyrup Over a year ago

It's quite a mix of vanilla and jquery but it works so I gave it an upvote

Heretic Monkey · Accepted Answer · 2018-06-22 16:17:41Z

Here's an alternate take on the answer. This code does the following:

When I push the mouse button on an option, track:

was it previously selected?
what were the selected options?

Then, when I release the mouse button:

select all of the options that were previously selected, and
if the current option was previously selected, unselect it.

The biggest difference with the other solution is that these pieces of information are tracked using the data() mechanism provided by jQuery.

$("#test option").on("mousedown", function() {
  var $me = $(this);
  $me.data("was-selected", $me.prop("selected"));
  $("#test").data("selected", $("#test").find("option:selected"));
}).on("mouseup", function() {
  var $me = $(this);
  $("#test").data("selected").prop("selected", true);
  $me.prop("selected", !$me.data("was-selected"));
});;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" multiple>
  <option selected value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Collectives™ on Stack Overflow

HTML multi select tag how to select multiple options via click event

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related