title: Multiple select element using select2 does not work properly
body: <p>Please note that this is not about <code>&lt;select&gt;</code> element with <code>multiple</code> attribute, but multiple <code>&lt;select&gt;</code>s in a form, which I haven't found asked here.</p>
  
  <p>See this <a href="http://codepen.io/anon/pen/ZQrgrR" rel="nofollow">codepen</a></p>
  
  <p>I have two <code>&lt;select&gt;</code> 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 <code>&lt;option&gt;</code> tags. It only shows the "No result found" message.</p>
  
  <p>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?</p>
  
  <p>Here is the html : </p>
  
  <pre><code>&lt;form action="" method="POST" role="form"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for=""&gt;Add Service Name&lt;/label&gt;
      &lt;select class="form-control select2" name="test-1" id="number1"&gt;
        &lt;option&gt;Service 1&lt;/option&gt;
        &lt;option&gt;Service 2&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for=""&gt;Add Service Name&lt;/label&gt;
      &lt;select class="form-control select2-service-package" id="number2" name="test-2"&gt;
        &lt;option&gt;Service 1&lt;/option&gt;
        &lt;option&gt;Service 2&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Create&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And here is the jQuery code</p>
  
  <pre><code>  if ($('.select2-service-package').length &gt; 0) {
      $('.select2-service-package').select2();
    };
  
    if ($('.select2').length &gt; 0) {
      $('.select2').select2();    
    };
  </code></pre>