title: Chosen dropdown list not working with Modal
body: <p>I am trying to get a jQuery Chosen select / dropdown list to work in a Bootbox modal. I have almost the same exact code working on a standard HTML page, so I thought it would be straight forward to just pop my list into a modal. I generate my divs and select objects in the modal, and then after it is "shown", I call Chosen:</p>
  
  <pre><code>div.on("shown", function() {
      $(".chzn-select").chosen();
      $(".chzn-select-deselect").chosen({allow_single_deselect:true});
      myApp.init();
  });
  </code></pre>
  
  <p>After this, Chosen seems to be broken. The select items are grayed out--I cannot click them. </p>
  
  <p>Inside myApp.init(), I populate the select items, and it works.</p>
  
  <p><img src="https://i.stack.imgur.com/VQOJy.png" alt="enter image description here"></p>
  
  <p>Behind the scenes for the modal, I can see that the Chosen container seems to have initialized, but it doesn't transfer the select options to the chzn-drop div. In the image, the chzn-results UL should be filled with options. Here is the modal version: <img src="https://i.stack.imgur.com/JJGYz.png" alt="enter image description here"></p>
  
  <p>Here is what it should look like, from the HTML version:
  <img src="https://i.stack.imgur.com/j7wLi.png" alt="the goal"></p>
  
  <p>In the HTML version, my code is at the bottom of the body tag (similarly the select options are populated in myApp.init()), and it seems to work just fine. The order of calls seems to be identical...</p>
  
  <pre><code>$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});
  $(document).ready(function(){   
    myApp.init();
  });
  </code></pre>
  
  <p>This is not just a matter of z-index--I have already played around with that with no luck. It seems like inside the modal, the Chosen plugin is somehow getting confused and not binding or updating, even though it has initialized properly. I'm not sure how to troubleshoot it and cannot find other people with the same problem...this makes me think it might be a timing issue (but why does it work in HTML?), or I am doing something stupid (highly likely). Does anyone have any suggestions on where to look or what is wrong?</p>
  
  <p>Thanks!</p>
  
  <p>============================</p>
  
  <h1>Adding HTML for the select inputs (per Christopher's question)</h1>
  
  <p>For both versions, I populate the select with the following code (edited version of what is in myApp.init()):</p>
  
  <pre><code>$.ajax call to a RESTful URL
  
  var callbackSuccess = function(data){
      if ( data ) {
      populateDropDownById(data, 'objectiveBanks');
  
          //Other things
      }
  };
  
  function populateDropDownById(data, elementId) {
      $('#' + elementId).append('&lt;option value = "null"&gt; -- Select -- &lt;/option&gt;');
      $.each( data, function( id, bean ) {
      var name = bean.displayName.text;
      var id =  bean.id;
          $('#' + elementId).append('&lt;option value =' + id + '&gt;' + name + '&lt;/option&gt;');
      });
  }
  </code></pre>
  
  <p>The actual elements themselves are as follows. In the non-working modal version:</p>
  
  <pre><code>var obj_banks_select = $('&lt;select id="objectiveBanks" name="objectiveBank" onchange="populateObjectives()" tabindex="2"&gt;&lt;/select&gt;')
                              .addClass('chzn-select')
                              .css({
                                  'width': '330px',
                                  'display': 'none'
                              });
  </code></pre>
  
  <p>And in the working HTML version:</p>
  
  <pre><code>&lt;div id="objectiveBanksWrapper"&gt;    
        &lt;span id="objectiveBanksLabel" class="label"&gt;&lt;/span&gt;
        &lt;select id="objectiveBanks" name="objectiveBank" onchange="populateObjectives()" class="chzn-select" tabindex="2" style="width: 330px; display: none;"&gt;&lt;/select&gt;
        &lt;span id=objectiveBanksLoader class="dropDownLoader"&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>