代码之家 › 专栏 › 技术社区 › mayorsanmayor

如何使用select_标记避免rails+jquery组合中的奇怪行为

ruby-on-rails jquery

mayorsanmayor · 技术社区 · 6 年前

我用过铁轨 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 ID和类,但没有产生正确的结果。

下面的屏幕截图是这样的:

正确的方法是什么?是否使下拉列表中选择的用户只填充相应下拉列表的证书列表?

1 回复 | 直到 6 年前

Vasilisa 6 年前

您需要以某种方式定义更新下拉列表。 $('.certificate-list') 返回页面上的所有证书下拉列表。为此,您可以使用强制签名的ID。

- @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);
    }
  });
}