How to Have a Select Option NOT Pre-Selected in a Rails Form

Question

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. I'm displaying these countertop colors using the Image-Picker gem and it works great. 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. 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:

<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.

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

Answer 1

Figured this out. I used jQuery to call a value of '0' on the option value.

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