title: jquery-chosen drop down field is empty
body: <p>I am develop my first ajax, jquery-chosen application and I am getting furious with a problem that bothers me for some days. I am trying to populate a chosen dropdown dynamically. The first drop down (1-automarke) populates correctly the second one (2-automodell) shows nothing:</p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>&lt;table&gt;
          &lt;tr&gt;        
              &lt;td align="Left" valign="center"&gt;&lt;p&gt;Automarke ausw&amp;auml;hlen&lt;/p&gt;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
              &lt;td valign="center"&gt;
              &lt;select data-placeholder="Bitte w&amp;auml;hlen sie eine Automarke" id="1-automarke"&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt; 
              &lt;td align="Left"&gt;&lt;p&gt;Automodell ausw&amp;auml;hlen&lt;/p&gt;&lt;/td&gt;
              &lt;td align="Left"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;
              &lt;select data-placeholder="Bitte w&amp;auml;hlen sie ein Automodell aus" id="2-automodell"&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JS Code:</strong></p>
  
  <pre><code>$.getJSON(baseUrl()+'index.php?option=com_xy&amp; ... &amp;format=raw',{key:val},function(r){
  
          if (val == "Automarke") {
              $("#1-automarke").empty();
              $("#1-automarke").append('&lt;option&gt;&lt;/option&gt;');
          } else if (arrayVal[0] == "1-automarke") {
              $("#2-automodell").empty();
              $("#2-automodell").append('&lt;option&gt;&lt;/option&gt;');                 
          }
  
  
          //read key and values 
          $.each(r.items,function(k,v){               
              console.log(val+" - key:"+k+" value:"+v);
              if (val == "Automarke") {
                  $("#1-automarke").append('&lt;option value="'+k+'"'+connection+'&gt;'+k+'&lt;/option&gt;');
              } else if (arrayVal[0] == "1-automarke") {
                  $("#2-automodell").append('&lt;option value="'+k+'"'+connection+'&gt;'+k+'&lt;/option&gt;');        
              }
  
          });
  
  
          if (val == "Automarke") {       
              $("#1-automarke").trigger("liszt:updated");                 
              $("#1-automarke").prop("disabled", false);                                  
          } else if (arrayVal[0] == "1-automarke") {
  
              $("#2-automodell").trigger("liszt:updated");                    
              $("#2-automodell").prop("disabled", false);         
  
          }               
  
          refreshSelects();
  </code></pre>
  
  <p>After selecting a value from the first drop down (id="1-automarke") I get this result for the first field (id="1-automarke") which is fine:</p>
  
  <p><strong>HTML result id="1-automarke":</strong></p>
  
  <pre><code>  &lt;td valign="center"&gt;
    &lt;select id="1-automarke" data-placeholder="Bitte wählen sie eine Automarke" style="display:     none;"&gt;
    &lt;option&gt;&lt;/option&gt;
    &lt;option value="Abarth"&gt;Abarth&lt;/option&gt;
    &lt;option value="Alfa Romeo"&gt;Alfa Romeo&lt;/option&gt;
    &lt;option value="Audi"&gt;Audi&lt;/option&gt;
      &lt;option value="Bentley"&gt;Bentley&lt;/option&gt;
      ...
      &lt;/select&gt;
      &lt;div id="1_automarke_chosen" class="chosen-container chosen-container-single" style="width: 300px;" title=""&gt;
      &lt;a class="chosen-single" tabindex="-1"&gt;
      &lt;span&gt;Audi&lt;/span&gt;
      &lt;div&gt;
      &lt;b&gt;&lt;/b&gt;
      &lt;/div&gt;
      &lt;/a&gt;
      &lt;div class="chosen-drop"&gt;
      &lt;div class="chosen-search"&gt;
      &lt;input type="text" autocomplete="off"&gt;
      &lt;/div&gt;
      &lt;ul class="chosen-results"&gt;
      &lt;li class="active-result" style="" data-option-array-index="1"&gt;Abarth&lt;/li&gt;
      &lt;li class="active-result" style="" data-option-array-index="2"&gt;Alfa Romeo&lt;/li&gt;
      &lt;li class="active-result result-selected" style="" data-option-array-index="3"&gt;Audi&lt;/li&gt;
      &lt;li class="active-result" style="" data-option-array-index="4"&gt;Bentley&lt;/li&gt;
      ...
      &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/td&gt;
  </code></pre>
  
  <p>and this code for the second field (id="2-automdell") where the <code>&lt;ul class="chosen-results"&gt;&lt;/ul&gt;</code> part ist empty:</p>
  
  <p><strong>HTML result id="2-automdell":</strong></p>
  
  <pre><code>&lt;td&gt;
  &lt;select id="2-automodell" data-placeholder="Bitte wählen sie ein Automodell aus" style="display: none;"&gt;
  &lt;option&gt;&lt;/option&gt;
  &lt;option value="80"&gt;80&lt;/option&gt;
  &lt;option value="A1"&gt;A1&lt;/option&gt;
  &lt;option value="A2"&gt;A2&lt;/option&gt;
  &lt;option value="A3"&gt;A3&lt;/option&gt;
  &lt;option value="A4"&gt;A4&lt;/option&gt;
  &lt;option value="A5"&gt;A5&lt;/option&gt;
  &lt;option value="A6"&gt;A6&lt;/option&gt;
  &lt;option value="A7"&gt;A7&lt;/option&gt;
  &lt;option value="A8"&gt;A8&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="2_automodell_chosen" class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 300px;" title=""&gt;
  &lt;a class="chosen-single chosen-default" tabindex="-1"&gt;
  &lt;span&gt;Bitte wählen sie ein Automodell aus&lt;/span&gt;
  &lt;div&gt;
  &lt;b&gt;&lt;/b&gt;
  &lt;/div&gt;
  &lt;/a&gt;
  &lt;div class="chosen-drop"&gt;
  &lt;div class="chosen-search"&gt;
  &lt;input type="text" autocomplete="off" readonly=""&gt;
  &lt;/div&gt;
  &lt;ul class="chosen-results"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>The AJAX part works fine, but I have no idea why the <code>&lt;ul class="chosen-results"&gt;&lt;/ul&gt;</code> is empty. Any help is welcome</p>