I am using Select2 from /

Right now I am initializing the dropdowns like this:

 <script>
 $(document).ready(function() { 

 $('.form_control').select2({
     minimumResultsForSearch: -1
 });

  });
 </script>

The problem is, I have a page where I am dynamically generating the dropdowns based orders, so I will have multiple dropdowns and forms with the same class on the same page, like this:

<select id="order_status" class="form-control" name="order_status">

<option value="">Option 1</option>
<option value="">Option 2</option>

</select>

When I do this, the first dropdown initializes fine, but all the others on the same page don't. How do I get it to initialize ALL of the form_control dropdowns?

JSFiddle: /

I am using Select2 from http://ivaynberg.github.io/select2/

Right now I am initializing the dropdowns like this:

 <script>
 $(document).ready(function() { 

 $('.form_control').select2({
     minimumResultsForSearch: -1
 });

  });
 </script>

The problem is, I have a page where I am dynamically generating the dropdowns based orders, so I will have multiple dropdowns and forms with the same class on the same page, like this:

<select id="order_status" class="form-control" name="order_status">

<option value="">Option 1</option>
<option value="">Option 2</option>

</select>

When I do this, the first dropdown initializes fine, but all the others on the same page don't. How do I get it to initialize ALL of the form_control dropdowns?

JSFiddle: http://jsfiddle/hryoy8rc/1/

• javascript
• jquery
• jquery-select2

• By the way, I could assign unique IDs to the dropdowns, but they could be anywhere from 000001 to 683935 so that's not a good option either. – user1227914 Commented Oct 9, 2014 at 22:38
• JSFiddle: jsfiddle/hryoy8rc/1 – user1227914 Commented Oct 9, 2014 at 22:49

5 Answers 5

its a bug in current version, i faced same issue use 4.0.0 and it will fix your issue: https://cdnjs.cloudflare./ajax/libs/select2/4.0.0/js/select2.min.js

Try my code below...

$('.form_control').each(function(index, element) {
    $(this).select2({
        minimumResultsForSearch: -1
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="order_status" class="form-control" name="order_status">

<option value="">Option 1</option>
<option value="">Option 2</option>

</select>

I'm using Select2 4.0.2 version and this snippet is working for me. It will initialize all select elements in a page into Select2.

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

I ended up giving each dropdown a dynamically generated ID like drop_003 and then initializing it inside the body like this:

<script>
$('#drop_003').select2({
minimumResultsForSearch: -1
});
</script>

For dynamically generating the boxes, I had to actually loop the options instead of using the helper.

Solution here:

$('.myselect').select2();    

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<form action="" method="POST" role="form">
    <p> working boxes </p>   

    <select class="form-control myselect">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
    <br>
    <br>
    <select class="form-control myselect">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
    
</form>