Question

我使用dependent-fields-rails gem来显示/隐藏表单中的字段。大多数情况下，它的工作非常好！但是，我很难弄清楚如何定位嵌套的字段，因为dependent-fields-rails需要一个ID来定位（CSS / JS意义上的ID），并且这些标识符我不知道＆＃39 ; t知道如何预测/编码。

示例：

用户拥有多张信用卡。在输入信用卡帐单邮寄地址时，我希望能够根据用户为该字段选择的值显示美国各州或加拿大省份。

<%= bootstrap_form_for(@user) do |f| %>
...user info fields...
<div>
        <%= f.fields_for :credit_cards do |card| %>
          <%= render 'shared_partials/credit_card_fields', f: card %>
        <% end %>
        <%= link_to_add_association 'Add Credit Card', f, :credit_cards, partial: 'shared_partials/credit_card_fields' %>
      </div>
    <%= f.submit "Save and Submit" %>
<% end %>

在信用卡部分：

<div class="nested-fields">
        <%= f.text_field :card_holder_first_name, :label => "Card Holder First Name" %>
        <%= f.text_field :card_holder_last_name, :label => 'Card Holder Last Name' %>
        <%= f.select :card_type, ["Master Card", "American Express","VISA"] %>
        <%= f.text_field :card_number, :label => 'Card Number', placeholder: 'Must be 15 or 16 digits long.' %>
        <%= f.text_field :ccv, :label => 'CCV Number' %>
        <%= f.date_select :expiration_date, as: :date_select, order: [:month, :year] %>
        <%= f.select :country, [["USA", "USA"],["Canada","Canada"]] %>
        <%= f.text_field :street_address %>
        <%= f.text_field :city %>
        <div class="js-dependent-fields" data-select-id='user_credit_cards_attributes_country' data-option-value='USA'>
        <%= f.select :state, us_states %>  
    </div>

    <%= f.text_field :zip %>
        <%= link_to_remove_association "Remove Credit Card", f %> <br>
        <hr />
    </div>

这里的问题是我无法弄清楚如何定位国家/地区选择字段的ID。你可以看到我已经尝试过＆＃34; user_credit_cards_attributes_country，＆＃34;但那不起作用。当我查看源代码时，ID类似于：id =＆＃34; user_credit_cards_attributes_1467770518320_country＆＃34; 中间的数字每次都在变化。我知道这是因为我在fields_for上下文中这样做，但我不知道如何定位一个动态的ID。想法？

Answer 1

最简单的解决方案是添加一个自定义class属性，然后将其用于CSS / JS，如下所示：

<%= f.select :country, [["USA", "USA"],["Canada","Canada"]], class: 'country-dropdown' %>

那应该为您提供可预测的选择器.country-dropdown。

以

1 个答案: