我想知道如何创建一个表单，该表单显示依赖于预先选择的字段的字段。例如：如果选择咖啡作为饮料，那么我才允许输入糖和牛奶的量。
这是我的表格：
<%= simple_form_for(@order) do |f| %>
<%= f.error_notification %>
<div class="field">
Drink: <%= f.select :drink, ['Coffee', 'Orange Juice', 'Tea'], id: 'extended_list' %><br />
</div>
Coffee Type: <%= f.select :coffee_type, ['Espresso', 'Cappuccino', 'Filter', 'Greek', 'Frappe', 'Latte'] %><br />
Sugar Amount: <%= f.select :sugar_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %><br />
Milk Amount: <%= f.select :milk_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %><br />
<% end %>
<%= f.button :submit, class: "button is-info" %>
<% end %>
首先，您需要将要隐藏在 div 中的字段包装起来。为它们中的每一个添加一个不同的 id。
比如你想隐藏coffee_type，你可以给它添加id“js-coffee-type”。
此外，添加一个类（例如，d-noneBootstrap 使用的 ），以便我们可以使用 CSS 隐藏它。
<%= simple_form_for(@order) do |f| %>
<div class="field">
Drink: <%= f.select :drink, ['Coffee', 'Orange Juice', 'Tea'], id: 'extended_list' %><br />
</div>
<div id="js-coffee-type" class="d-none">Coffee Type: <%= f.select :coffee_type, ['Espresso', 'Cappuccino', 'Filter', 'Greek', 'Frappe', 'Latte'] %></div>
<div>Sugar Amount: <%= f.select :sugar_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %></div>
<div>Milk Amount: <%= f.select :milk_amount, ((1..5).map {|i| [i,i] } << ["None",nil]) %></div>
<%= f.button :submit, class: "button is-info" %>
<% end %>
在同一个文件中，您可以编写隐藏此字段的 CSS 代码。
<style>
.d-none { display: none; }
</style>
现在您可以编写 JS 代码来根据第一个字段切换类。
<script>
$("#extended_list").change(function() {
var drink = $("#extended_list").val();
if (drink == "Coffee") {
$("#js-coffee-type").removeClass("d-none");
} else {
$("#js-coffee-type").addClass("d-none");
}
});
</script>
这些不是最佳实践，但它们应该起作用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句