0

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: enter image description here

Then I press chosen select and it clears: enter image description here

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?

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.