如何通过AJAX编程为select下拉列表添加spinner加载动画

问题根因 #

你的select使用了Chosen自定义选择插件（从js-dop-chosen类可判断），这类插件会隐藏原生select元素，替换为自定义DOM结构，Drupal默认AJAX throbber默认挂载在原生表单元素旁，因此会随原生select一起隐藏，或是找不到挂载位置无法渲染。

解决方案 #

1. 修改表单配置代码 #

$form['select_choice'] = [
  '#type' => 'select',
  '#title' => t('Choice'),
  // 新增包裹容器，方便指定throbber挂载位置
  '#prefix' => '<div class="select-choice-wrapper">',
  '#suffix' => '</div>',
  '#attributes' => [
    'class' => ['js-dop-chosen'],
  ],
  '#options' => [
    '---' => t('None'),
    t('choice 1'),
    t('choice 2'),
  ],
  '#ajax' => [
    'event' => 'change',
    'wrapper' => 'form-wrapper',
    'callback' => [$this, 'ajaxCallback'],
    'progress' => [
      'type' => 'throbber',
      'message' => 'fetching content.....',
      // 新增：指定throbber挂载到我们新增的包裹容器上
      'selector' => '.select-choice-wrapper',
      // 新增：指定throbber放在容器的尾部，可根据需求改为before放在前面
      'placement' => 'after',
    ],
  ],
];

注意：请确认wrapper参数对应的页面元素ID真实存在，否则AJAX回调渲染也会失效

2. 兼容Chosen事件触发 #

部分场景下Chosen的选择变更事件不会触发Drupal原生AJAX监听，需要添加以下JS适配：

(function ($, Drupal) {
  Drupal.behaviors.chosenAjaxThrobberFix = {
    attach: function (context) {
      $('.js-dop-chosen', context).once('chosen-ajax-fix').each(function () {
        // 监听Chosen的选择变更事件，同步触发原生表单更新事件
        $(this).on('change', function () {
          $(this).trigger('formUpdated');
        });
      });
    }
  };
})(jQuery, Drupal);

3. 可选样式调整 #

如果throbber位置不符合预期，添加以下CSS调整样式即可：

.select-choice-wrapper + .ajax-progress-throbber {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者user66981