Drupal 7 chosen module use ajax to fill the select

Question

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' => [
        '#type' => 'select',
        '#options' => _purchases_fill_type_options(),
        '#attributes' => [
          'class' => ['purchases-funds-report-item-type'],
        ],
        '#empty_option' => t('Select type'),
        '#empty_value' => '',
        '#required' => TRUE,
        '#title_display' => 'invisible',
        '#default_value' => '',
        '#cell_attributes' => [
          'class' => ['purchasetype'],
        ],
      ],
      'account_name' => [
        '#type' => 'select',
        '#options' => [],
        '#empty_option' => t('Select account'),
        '#required' => TRUE,
//        '#chosen' => TRUE,
        '#title_display' => 'invisible',
        '#default_value' => '',
        '#attributes' => [
          'class' => [
            'purchases-funds-report-account-name',
            'common-select-report',
          ],
        ],
        '#cell_attributes' => [
          'class' => ['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("gridTableRowAdd", 'tr', function() {
      $(this).find('.accountname select').addClass('chosen-enable');
      Drupal.attachBehaviors(this, Drupal.settings);
    });

And the result of ajax :

var li_options = ['<li value="">' + Drupal.t('Select account') + '</li>'];
$.each(data, function (i, value) {
            li_options.push('<li class="active-result" data-option-array-index="' + i + '">' + value + '</li>');
          });
$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?

Answer 1

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");