Как избежать странного поведения в комбинированном Rails + jQuery с использованием select_tag

Question

Я использовал rails select_tag для получения списка пользователей, как это.

- @mandatory_signatures.each do |mandatory_signature|
    .form-group.row.mt-4
      .col-sm-5
        %label Choose #{mandatory_signature.signature_title}
        .centered-vertical
          = select_tag '', options_from_collection_for_select(find_users_with_certificate_for(mandatory_signature), :id, :full_name), { include_blank: "Select User", class: 'form-control select2 find-user-certificate', style: 'width: 100%;' }

      .col-sm-5
        %label Choose Certificate
        .centered-vertical
          = select_tag nil, "", { include_blank: "Select Certificate", class: 'form-control select2 certificate-list', style: 'width: 100%;' }

      .col-sm-2.pl-3
        %label Signature
        .form-control.invisible
        %img.rounded-circle{:src => "http://via.placeholder.com/80x80"}

Возвращает список пользователей, и при выборе одного из пользователей я полагаю, что нужно вызвать API и вывести список сертификатов, принадлежащих пользователю.

Используя эту функцию jquery, я могу получить список сертификатов:

$('.find-user-certificate').change(function() {
    let user_id = $(this).val();

    getUserCertificates(user_id);
});

function getUserCertificates(userId) {
  let hostname = window.location.origin;

  $.ajax({
    url: hostname + '/users/' + userId + '/certificates',
    dataType: 'json',
    method: 'get',
    success: function(data) {
      options = '';
      data.forEach(function(object) {
        options += `<option value=${object.id}>${object.name}</option>`;
      });
      $('.certificate-list').empty();
      $('.certificate-list').append(options);
    }
  });
}

Проблема теперь в том, что всякий раз, когда я пытаюсь получить сертификат для пользователя, он заполняет другие раскрывающиеся списки, а также требуемый раскрывающийся список. Я пытался использовать HTML-идентификатор и класс, но не дал нужного результата.

Вот как это выглядит на скриншоте ниже:

Как правильно это сделать? Сделать пользователя выбранным в выпадающем списке только для заполнения списка сертификатов соответствующего выпадающего списка?

Answer 1

Вам нужно как-то определить выпадающий список для обновления. $('.certificate-list') возвращает все выпадающие списки сертификатов на странице. Для этой цели вы можете использовать идентификатор обязательной подписи.

- @mandatory_signatures.each do |mandatory_signature|
    .form-group.row.mt-4
      .col-sm-5
        %label Choose #{mandatory_signature.signature_title}
        .centered-vertical
          = select_tag '', options_from_collection_for_select(find_users_with_certificate_for(mandatory_signature), :id, :full_name), { include_blank: "Select User", class: 'form-control select2 find-user-certificate', style: 'width: 100%;', data: { mandatory: mandatory_signature.id } }

      .col-sm-5
        %label Choose Certificate
        .centered-vertical
          = select_tag nil, "", { include_blank: "Select Certificate", class: "form-control select2 certificate-list js-#{ mandatory_signature.id }", style: 'width: 100%;' }

$('.find-user-certificate').change(function() {
    let user_id = $(this).val();
    let mandatory_id = $(this).data('mandatory')

    getUserCertificates(user_id, mandatory_id);
});

function getUserCertificates(userId, mandatoryId) {
  let hostname = window.location.origin;

  $.ajax({
    url: hostname + '/users/' + userId + '/certificates',
    dataType: 'json',
    method: 'get',
    success: function(data) {
      options = '';
      data.forEach(function(object) {
        options += `<option value=${object.id}>${object.name}</option>`;
      });
      $('.certificate-list.js-' + mandatoryId).empty();
      $('.certificate-list.js-' + mandatoryId).append(options);
    }
  });
}