如何在Rails表单中预先选择一个选择选项

时间:2015-10-18 18:49:16

标签: javascript jquery ruby-on-rails forms

所以我正在Rails项目中构建一个表单,我让用户选择他们想要的台式(花岗岩,大理石等),然后他们可以选择他们想要的相应的花岗岩或大理石颜色。我正在使用Image-Picker宝石展示这些台面颜色,效果很好。我遇到的唯一问题是每个台面颜色选项都有预先选定的颜色。

我打算使用jQuery来隐藏他们没有选择的材料的颜色选项。因此,例如,如果用户选择花岗岩,他们将看不到为大理石等列出的颜色选项。但是,由于每种类型的材料都具有预先选择的颜色,因此数据库将填充每种颜色选项,尽管事实上只选择了一种材料。

这是我的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>

然后我使用这个jQuery来调用Image Picker功能。

$(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'));

     }
   });

 });    

您可以从屏幕截图中看到每种材质颜色都预先选择了第一个选项。

Image Picker

理想情况下,我希望这些是多个选择选项,并且不会预先选择它们。

任何方向都会非常有帮助。 谢谢!

1 个答案:

答案 0 :(得分:0)

想出来了。我使用jQuery来调用&#39; 0&#39;关于期权价值。

$('#div').val('0');