2015-10-18 57 views
0

因此,我在Rails项目中构建了一个表单,并且让用户选择他们需要哪种类型的工作台面(花岗岩,大理石等)然后他们可以选择他们想要的相应花岗岩或大理石颜色。我使用Image-Picker宝石显示这些台面颜色,效果很好。我遇到的唯一问题是每个Countertop颜色选项都预先选择了一种颜色。如何在Rails表单中没有预先选择选项

我打算使用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来调用图像选取器功能。

$(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

理想情况下,我想这是多选选项,并为他们没有被预先选择。

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

回答

0

想通了。我使用jQuery在选项值上调用值'0'。

$('#div').val('0'); 
相关问题