[英]How to Have a Select Option NOT Pre-Selected in a Rails Form
So I'm building a form in a Rails project and I'm having a user select which type of Countertop they want (Granite, Marble, etc.) and they can then select the corresponding Granite or Marble color they want. 因此,我在Rails项目中构建了一个表单,并让用户选择他们想要的工作台面类型(花岗岩,大理石等),然后他们可以选择他们想要的相应花岗岩或大理石颜色。 I'm displaying these countertop colors using the Image-Picker gem and it works great.
我正在使用Image-Picker宝石显示这些工作台面颜色,并且效果很好。 The only problem I'm running into is each Countertop color option has a color pre-selected.
我遇到的唯一问题是每个“台面”颜色选项都有一种预先选择的颜色。
I'm planning on using jQuery to hide the color options for the materials they don't select. 我打算使用jQuery隐藏他们未选择的材料的颜色选项。 So if a user selects granite, for example, they won't see the color options listed for marble, etc. However, since each type of material has a color-preselected, the database is getting populated for every color option despite the fact that only one type of material is selected.
因此,例如,如果用户选择花岗岩,他们将看不到大理石等列出的颜色选项。但是,由于每种类型的材料都有预先选择的颜色,因此尽管存在仅选择一种类型的材料。
Here's my Rails code: 这是我的Rails代码:
<div id="countertype" class="form-group" align="left">
<%= f.label :countertype_id, "What type of countertop material do you need?" %></br>
<%= f.collection_select :countertype_id, Countertype.all, :id, :name, { :prompt => "Select Your Material" }, class: "input-sm" %>
</div>
<div id="granitecolor" align="left" class="form-group">
<%= f.label :granitecolor_id, "What granite color pattern do you want?" %></br>
<%= f.select :granitecolor_id, options_for_select(@granitecolors.map{ |g| [g.name, g.id, {'data-img-src'=>g.url}] }) %>
</div>
<div id="marblecolor" align="left" class="form-group">
<%= f.label :marblecolor_id, "What marble color pattern do you want?" %></br>
<%= f.select :marblecolor_id, options_for_select(@marblecolors.map{ |m| [m.name, m.id, {'data-img-src'=>m.url}] }) %>
</div>
Then I use this jQuery to call the Image Picker functionality. 然后,我使用此jQuery调用“图像选择器”功能。
$(document).ready(function(){
$("select:not(#countertop_countertype_id)").imagepicker({
show_label: true,
clicked:function(){
console.log($(this).find("option[value='" + $(this).val() + "']").data('img-src'));
}
});
});
You can see from a screen shot that each material color has the first option pre-selected. 从屏幕截图中可以看到,每种材料颜色都已预先选择了第一个选项。
Ideally, I'd like these to be multiple select options and for none of them to be pre-selected. 理想情况下,我希望这些是多个选择选项,并且都不希望它们被预先选择。
Any direction would be hugely helpful. 任何方向都会有很大帮助。 Thanks!
谢谢!
Figured this out. 想通了。 I used jQuery to call a value of '0' on the option value.
我使用jQuery在选项值上调用值“ 0”。
$('#div').val('0');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.