Multiple select element using select2 does not work properly

Question

Please note that this is not about <select> element with multiple attribute, but multiple <select>s in a form, which I haven't found asked here.

See this codepen

I have two <select> element with unique ids and names. On both element I've also used select2. I was expecting the two would have initiated the same behavior hence the same jQuery code. The two did start the select2 but the later was not showing any option included in the <option> tags. It only shows the "No result found" message.

Question : I am pretty sure this one is pretty trivial, but can anyone show me what is wrong with the code? How is it supposed to be written?

Here is the html :

<form action="" method="POST" role="form">
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control select2" name="test-1" id="number1">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control select2-service-package" id="number2" name="test-2">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Create</button>
</form>

And here is the jQuery code

  if ($('.select2-service-package').length > 0) {
    $('.select2-service-package').select2();
  };

  if ($('.select2').length > 0) {
    $('.select2').select2();    
  };

Him

Answer 1

Try to change the name of the class select2 to something else (e.g. myselect).

Select2 plugin probably uses the select2 class internally.

Working example: https://jsfiddle.net/6pnv3v58/

Pye

Great!. You solved the problem. I guess they should add it on their Github Page. Thanks @Daniel. – Him

Want to actually open a ticket on GItHub about this? Select2 doesn't actually use that class anywhere. The issue could also be fixed by refining your selector to be select.select2, so it only picked up <select> elements. – Cumulate

@KevinBrown I've looked at the generated select2 code, and it seems like it does use the class internally.<span class="select2 select2-container select2-container--default select2-container--focus select2-container--below select2-container--open" dir="ltr" style="width: 545px;">... – Pye

Answer 2

<script type="text/javascript">
    $(document).ready(function(){
        $("#number1").select2();
        $("#number2").select2();
    });
</script>

Target the id-s

And remove the "select2" from the class tag for the select html part.

Evildoer

Answer 3

Using same class same form with mutltiple select2 will works like this, I'm using for dynamic added select in the system.

$('body').on('focus',".myselect", function(){
                    $(this).select2({ });
            });
            
 $('#item-add').on('click', function () {

var frm = $('#frm');
            
                    frm.find('.data')
                        .append(
                            '<br><div class="form-group"> <label for="">Add Service Name</label><select class="form-control myselect" id="number2" name="test-2"><option>Service 1</option><option>Service 2</option></select></div>'
                        );



            });

.myselect{
  width:150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>

<form action="" method="POST" role="form" id="frm">
<div class="data">
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control myselect" name="test-1" id="number1">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  <br>
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control myselect" id="number2" name="test-2">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  <br>
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control myselect" id="number2" name="test-2">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  </div>
  <br>
   <button type="button" class="btn btn-sm btn-primary" id="item-add">Add</button>
                                                
  <button type="submit" class="btn btn-primary">Create</button>
</form>

Emptyheaded