Setting on multiple select elements via classname does not work

[netsensei]

Hi! If you have multiple select elements on a page (e.g. a table with rows and each row has a select form element) you can't set the multiselect plugin on all elements using the class property.

For instance:

    <select class="foobar">
        <option value="bread">Bread</option>
        <option value="cereal">Cereal</option>
        <option value="pasta">Pasta</option>
        <option value="rice">Rice</option>
        <option value="meat">Meat</option>
        <option value="fish">Fish</option>
    </select>

    <select class="foobar">
        <option value="bread">Bread</option>
        <option value="cereal">Cereal</option>
        <option value="pasta">Pasta</option>
        <option value="rice">Rice</option>
        <option value="meat">Meat</option>
        <option value="fish">Fish</option>
    </select>

This bit will only initialize the multiselect on the first select element, not the second:

const foobar = new IconicMultiSelect({
    select: ".foobar",
});

foobar.init();

As a work around, you can do this:

  document.querySelectorAll("select").forEach(function (el) {
      const foobar = new IconicMultiSelect({
          select: "#" + el.id,
      });

      foobar.init();
  })

But this is convoluted, and it requires that every select element has an id property.

[sidneywm]

Hi, for the moment, the component can't be initialized on multiple identical select tag. It was not designed for this particular case.