Drupal 7 chosen module use ajax to fill the select I have two select elements and depending on what I select in the first select element second should fill from ajax call. First one is the simple select second one use chosen. The problem is if I fill .chosen-results ul with li results in jQuery and press on select elemnt it clears all ul.
    'purchase_type' =&gt; [
        '#type' =&gt; 'select',
        '#options' =&gt; _purchases_fill_type_options(),
        '#attributes' =&gt; [
          'class' =&gt; ['purchases-funds-report-item-type'],
        ],
        '#empty_option' =&gt; t('Select type'),
        '#empty_value' =&gt; '',
        '#required' =&gt; TRUE,
        '#title_display' =&gt; 'invisible',
        '#default_value' =&gt; '',
        '#cell_attributes' =&gt; [
          'class' =&gt; ['purchasetype'],
        ],
      ],
      'account_name' =&gt; [
        '#type' =&gt; 'select',
        '#options' =&gt; [],
        '#empty_option' =&gt; t('Select account'),
        '#required' =&gt; TRUE,
//        '#chosen' =&gt; TRUE,
        '#title_display' =&gt; 'invisible',
        '#default_value' =&gt; '',
        '#attributes' =&gt; [
          'class' =&gt; [
            'purchases-funds-report-account-name',
            'common-select-report',
          ],
        ],
        '#cell_attributes' =&gt; [
          'class' =&gt; ['accountname'],
        ],
      ],

Chosen is commented because I initiate it from jQuery adding class on it and sending to attachBehaviors because these rows are added dinamicly:
$('#purchases-report-funds-edit-form', context).on(&quot;gridTableRowAdd&quot;, 'tr', function() {
      $(this).find('.accountname select').addClass('chosen-enable');
      Drupal.attachBehaviors(this, Drupal.settings);
    });

And the result of ajax :
var li_options = ['&lt;li value=&quot;&quot;&gt;' + Drupal.t('Select account') + '&lt;/li&gt;'];
$.each(data, function (i, value) {
            li_options.push('&lt;li class=&quot;active-result&quot; data-option-array-index=&quot;' + i + '&quot;&gt;' + value + '&lt;/li&gt;');
          });
$this.parents('tr').find('.chosen-results').html(li_options.join(''));

When I press first select and populate chosen select:

Then I press chosen select and it clears:

This approach is working fine when chosen select options are defined from php code and not dynamically added.
My question is there any event that I should fire on that the list was changed so it doesn't clear it, or another way it can be solved?
I'm not completely sure about this, but have you tried triggering "chosen:updated" after updating the options? See Updating Chosen Dynamically 

$("#form_field").trigger("chosen:updated");