Question

我仍然在学习RoR，但我无法通过关注别人的代码来学习。我决定通过自己的应用程序实现。

我已经生成了一个脚手架，在_form.html.erb我有这个：

<div class="field">
 <%= f.label :bath_accessories %><br>
 <%= f.select :bath_accessories, options_for_select(["Shower", "Extractor Fan", "Lights", "Shaver", "Heat Rail"]) %><br>
</div>

当用户选择＆＃34;淋浴＆＃34;从上面的列表中，我想在视图中启用：

<div class="field">
 <%= f.label :watts %><br>
 <%= f.number_field :watts %>
</div>

我迷失了把if语句放在哪里：<%= f.select :bath_accessories, options_for_select(["Shower", "Extractor Fan", "Lights", "Shaver", "Heat Rail"]) %>但是我这样做了，没有任何显示：

<% if :bath_accessories[0] %>
  # What to out put here with "<%= code %>?

生成的HTML标记：

<form class="new_bathroom_accessory" id="new_bathroom_accessory" action="/bathroom_accessories" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="r9M+Q7Np+/i68gwj65JSvV8wi4+4yb5d6tFWBHMw8k9nz1oRHGzh7AZHOTFvlaiS2lmqTch356vVYNlh7Urifw==" />

<div class="field">
 <label for="bathroom_accessory_bath_accessories">Bath accessories</label><br>
<select name="bathroom_accessory[bath_accessories]"   id="bathroom_accessory_bath_accessories"><option value="Shower">Shower</option>
<option value="Extractor Fan">Extractor Fan</option>
<option value="Lights">Lights</option>
<option value="Shaver">Shaver</option>
<option value="Heat Rail">Heat Rail</option></select><br>
</div>

 <div class="field">
  <label for="bathroom_accessory_watts">Watts</label><br>
 <input type="number" name="bathroom_accessory[watts]" id="bathroom_accessory_watts" />
</div>
<div class="field">
 <label for="bathroom_accessory_volts">Volts</label><br>
 <input type="number" name="bathroom_accessory[volts]" id="bathroom_accessory_volts" />
</div>

 <div class="actions">
  <input type="submit" name="commit" value="Create Bathroom accessory" />
 </div>
</form>

Answer 1

通过向id添加<div>，您可以根据用户选择控制<div>。

<div class="field" id="shower_id">
 <%= f.label :watts %><br>
 <%= f.number_field :watts %>
</div>

您需要JavaScript或JQuery代码

$('#bathroom_accessory_bath_accessories').on('change',function(){
        if( $(this).val()==="Shower"){
        $("#shower_id").show()
        }
        else{
        $("#shower_id").hide()
        }
    });

DEMO

铁路4：脚手架中的条件

1 个答案: