Adding two identical select2 forms to same page

Question

I am trying to add two select2 multi-value select boxes to my Rails app.

The top form works fine, but the bottom one does not work.

I experimented with changing ids and adding new js code, but no success. Is there something fundamentally wrong that I'm missing?

Index.html

# This one works fine
<div class="search_genre">Genre:</div>
<div class="select2-container select2-container-multi populate">
    <select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
       <optgroup label="Popular">
           <option value="Alt">Rock</option>
           <option value="Ind">Indie</option>
           <option value="Ind">Alternative</option>
           <option value="Ind">Acoustic</option>
       </optgroup>
      </select>
</div>


# This one doesn't show a text input or the optiongroup values
<div class="search_region">Region:</div>
<div class="select2-container select2-container-multi populate">
    <select multiple="" name="e9" id="e9" style="width:300px" class="populate select2-offscreen" tabindex="-1" placeholder="Search or Select">
       <optgroup label="Local">
           <option value="PDX">Greater Portland</option>
           <option value="OR">Oregon</option>
           <option value="WA">Washington</option>
       </optgroup>
      </select>
</div>

application.js

$("#e9").select2();

Solution 1

You can not have two elements with the same id. Use classes instead.

Both your selects have id="e9" instead try adding something like class="my-select" to your <select> element.

then do $('.my-select').select2();

Solution 2

For each select2 in the same page you must define unique id for tag "data-select2-id".

data-select2-id="Project"

and

data-select2-id="WBSDate"

Solution 3

As @Ramy Mention. I hope its works fine for everyone. If It won't work then try this. In select box you can't use same id for an example:

       <select class="form-control select2" id="select">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>
        <select class="form-control select2" id="select">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>

If you have same id the search box won't work. Just try to different Id Name like below.

       <select class="form-control select2" id="select">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>
        <select class="form-control select2" id="select1">
           <option>Select</option> 
           <option>Cycle</option> 
           <option>Horse</option> 
        </select>

I faced this kind of problem. That's why i shared here my opinion. Thanks hope someone will get help from this.