How to handle multiple dropdown select option in vanilla JS

Question

Given the following select node:

<select multiple="multiple">
     <option value="car">car</option>
     <option value="scooter">scooter</option>
     <option value="bus">bus</option>
</select>

How can I do multi-select without pressing the ctrl key and without using jQuery ? I would like to achieve this using only vanilla Javascript. Thanks!

What have you tried so far? This sounds like a task better use for radio buttons than a select. — ak_
– ak_, Commented Mar 28, 2016 at 13:04
problem here is the fact not all browsers support click on options so to make it work it would be a mess. Maybe you should use a group of checkboxes and style them to look like a select? — epascarello
– epascarello, Commented Mar 28, 2016 at 14:05
@AdamKonieska Can't use radio as they can't do multiple select .. so I'm sure you meant checkbox — Asons
– Asons, Commented Mar 28, 2016 at 14:15

Asons · Accepted Answer · 2016-03-29 07:12:26Z

Here is one way to do that...

(function(values,sel) {

  var sel = document.querySelector('select');
  values = new Array(sel.length);

  sel.addEventListener('click', function(e) {
    
    values[e.target.index] = !values[e.target.index];    
    for(var i=0;i<values.length;++i) {
      sel.options[i].selected = values[i];
    }

  });

})();

<select multiple="multiple">
     <option value="car">car</option>
     <option value="scooter">scooter</option>
     <option value="bus">bus</option>
</select>

...and a non script way could be with checkbox's

.check-multiple {
  display: inline-block;
  height: 60px;
  overflow-y: scroll;
  border: 1px solid gray;
}
.check-multiple input {
  display: none;
}
.check-multiple label {
  display: block;
}
.check-multiple span {
  display: inline-block;
  width: 100%;
}
.check-multiple input:checked ~ span {
  background: #03f;
  color: white;
}

<div class="check-multiple">
     <label><input value="car" type="checkbox"><span>car</span></label>
     <label><input value="scooter" type="checkbox"><span>scooter</span></label>
     <label><input value="bus" type="checkbox"><span>bus</span></label>  
</div>

Alex Ruiz · Accepted Answer · 2016-03-28 15:29:47Z

1

I would recommend using checkboxes. Those are the best HTML element to support selecting multiple options.

You could write your own multi-select component in Javascript to mirror popular libraries such as Chosen, but I wouldn't recommend it due to the time committment.

answered Mar 28, 2016 at 15:29

Alex Ruiz

1,5721 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to handle multiple dropdown select option in vanilla JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related