Applying Tom Select to multiple elements based on matching css selector

First i tried this, and expected it to apply to every multiple select element on the page:

var settings = {};
new TomSelect("select[multiple]", settings);

This did not work. In documentation that was removed tomselect does indeed “Note: using CSS Selectors that match multiple elements will only create a Tom Select instance on the first matching element.”

It is not hard to fix, you just have to know that TomSelect will not be doing the iteration for you. Here is one way to do it:

var settings = {};
document.querySelectorAll('select[multiple]').forEach((input) => {
  new TomSelect(input, settings);

TomSelect allows passing in an HTML Element

Note that this solution only works on modern browsers (no IE, Opera Mini). See

I proposed documenting this (again) here:

Document that CSS selectors which match multiple items only apply to the first · Issue #356 · orchidjs/tom-select