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();

Bedridden

It's hopefully just a cut/paste error but you have the same value for three of your options in you "this one works fine" code snippet. value="Ind" x3 – Gerge

try this https://mcmap.net/q/1475575/-multiple-select-element-using-select2-does-not-work-properly – Matthia

Answer 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();

Wendelina

Answer 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"

Act

Thanks. its helped me. I am searching for several days for this. but for me something is differendt i had same id. so i changed the id and its works fine. – Mackenzie

Answer 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.

Mackenzie

Answer 4

Ok, so it was something fundamental!

The id's were both the same. This seemed odd to me, and was the first thing that I changed to see if it would work. I added a new jquery code to application.js with id #e10 and changed teh second form's id accordingly. Yesterday, this didn't work. However, today it did. I must have missed something silly, like saving the page...

I wish SO allowed you to delete answers.

Bedridden

Answer 5

Using identical data-select2-id property solve the problem.

MVC input helpers throws sytax error for hyphen, replace the hyphen with underscore, and salute.

@Html.ListBoxFor(x => x.WIds, WList, new { @class = "form-control opWflWafers", @multiple = "multiple", data_select2_id=identicalname })

Airway

Answer 6

<div class="float-left col-sm-3">
<select class="form-control" id="parentesco" name="parentesco[]" required></select>
</div>
<script>
      $('#parentesco*').select2({
        placeholder: 'Seleccionar paciente',
        ajax: {
          url: 'ajax_paciente.php',
          dataType: 'json',
          delay: 250,
          processResults: function (data) {
            return {
              results: data
            };
          },
          cache: true
        }
      });
     
</script>

Postmillennialism

Please, especially when answering to old questions with already upvoted answers, avoid code-only answers. Explain the principle, and what new idea, absent from previous answers it provides. – Victoir