geekyfreaky
geekyfreaky

Reputation: 69

How to use select2.js with multiple ids

the select2-multiple works when placed only once. but i've a page where i need to place select2-multiple multiple times.

as select2 assigns particular id to the div i.e select-multiple, i can't change that.

Works fine ->

<select id="select2-multiple" data-plugin="select2" class="form-control" multiple>

when placing multiple, won't work-> (only the first one works)

<select id="select2-multiple" data-plugin="select2" class="form-control" multiple>
<select id="select2-multiple" data-plugin="select2" class="form-control" multiple>
<select id="select2-multiple" data-plugin="select2" class="form-control" multiple>

i know because multiple id overlapping. but i can't change the id as select2 will not work on different id other than "select2-multiple"

Any Solution ?

Upvotes: 0

Views: 3003

Answers (1)

Casper
Casper

Reputation: 1539

You cannot initialize two select2 for same ID therefore use class attribute to initialize select2.

HTML

<select class="form-control select2-multiple" multiple>
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<select class="form-control select2-multiple" multiple>
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

JS

$(document).ready(function() {
   $('.select2-multiple').select2();
}); 

Working demo: https://jsbin.com/misubazino

Upvotes: 1

Related Questions