Applying Tom Select to multiple elements based on matching css selector
- “tomselect” multiple matching css selector
- document.getElementsByTagName iterate
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 https://caniuse.com/mdn-api_nodelist_foreach
I proposed documenting this (again) here: