title: multipleSelect() not working properly on dynamically added <select>
body: <p>I'm using the <a href="http://wenzhixin.net.cn/p/multiple-select/docs/" rel="nofollow">jQuery Multiple Select</a> library by wenzhixin. </p>
  
  <p>If I try applying <code>multipleSelect()</code> to an element immediately after appending that element to the DOM, the multiple select appears blank (without any options): </p>
  
  <p><img src="https://cloud.githubusercontent.com/assets/3012015/6530592/1762ee38-c400-11e4-91ad-0b7f53e7f9d4.png" alt="image"></p>
  
  <pre><code>var template  = "&lt;select multiple id='multiple-select'&gt;";
      template +=     "&lt;option value='1'&gt;Apples&lt;/option&gt;";
      template +=     "&lt;option value='2'&gt;Oranges&lt;/option&gt;";
      template += "&lt;/select&gt;";
  
  $("#wrapper").html(template)
  
  $("#multiple-select").multipleSelect();
  </code></pre>
  
  <p>However, if I delay the <code>multipleSelect()</code> call using <code>setTimeout()</code>, it works:</p>
  
  <p><img src="https://cloud.githubusercontent.com/assets/3012015/6530621/68d65b9c-c400-11e4-8e8a-706030e082a3.png" alt="image"></p>
  
  <pre><code>setTimeout(function(){
      $("#multiple-select").multipleSelect();
  }, 5000);
  </code></pre>
  
  <p>Any idea what's going on here? How can I get the library to immediately read the element? Our form is generated dynamically using Javascript.</p>
  
  <p>I've also <a href="https://github.com/wenzhixin/multiple-select/issues/183" rel="nofollow">filed an issue</a> on the library's GitHub page.</p>
  
  <p><strong>UPDATE!</strong> I'm making the <code>multipleSelect()</code> call on a <code>&lt;select&gt;</code> element in a non-active Bootstrap tab. That seems to be related to the issue, and I'm able to recreate it here: <a href="http://jsfiddle.net/zbkcgcam/1/" rel="nofollow">http://jsfiddle.net/zbkcgcam/1/</a>. As you can see, the <code>multipleSelect()</code> call is being made on the <code>&lt;select&gt;</code> element in the 'Search' tab, and when you open the search tab you can see the glitch.</p>
  
  <p><strong>SOLVED!</strong> You are required to define a width for the <code>&lt;select&gt;</code> element, for some reason, if the <code>&lt;select&gt;</code> is nested inside a block-level element with <code>display: none</code>. See my answer below for more details. Thanks for the help!</p>