Składnia jQuery w interaktywnych formularzach Rails - javascript, jquery, ruby-on-rails, formularze

Buduję więc interaktywny formularz dla szynprojektu i nie jestem pewien, jak wyświetlić listę wielu funkcji jQuery w tym samym pliku. Za każdym razem, gdy próbuję dodać drugi zestaw języka kodu, psuje cały plik.

Oto kod szyny.

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

Jeśli użytkownik wybierze opcję id 1 z powyższego pola, które nazywa się „granit”, pojawi się pole wyboru granitecolor. To samo działałoby w przypadku marmuru, steatytu itp.

Oto pole, które chciałbym pokazać:

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

LUB

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

Oto, co mam teraz w moim pliku jQuery i działa dobrze.

$(document).ready(function(){
$("select:not(#countertop_countertype_id)").val("0").imagepicker({
show_label:   true,
clicked:function(){

console.log($(this).find("option[value="" + $(this).val() + ""]").data("img-src"));

}
});

});

Oto, co chciałbym dodać (lub jego odmianę).

$(document).ready(function () {
toggleFields();
$("#countertype").change(function () {
toggleFields();
});

});

function toggleFields() {
if ($("#countertype").val() = 1 )
$("#granitecolor").show();
elseif
($("#countertype").val() = 2 )
$("#marblecolor").show();
}

Każda pomoc byłaby bardzo mile widziana! Dzięki!

Odpowiedzi:

O wiele łatwiej niż myślałem. Właśnie opublikowałem cały kod jQuery zaraz po pierwszym.

$(document).ready(function(){
$("select:not(#countertop_countertype_id)").val("0").imagepicker({
show_label:   true,
clicked:function(){

console.log($(this).find("option[value="" + $(this).val() + ""]").data("img-src"));

}
});

});

$(document).ready(function() {

$("#granitecolor").hide();
$("#marblecolor").hide();

$("#countertype").change(function () {
if ($("#countertype option:selected").text() == "Granite"){
$("#granitecolor").show();
$("#marblecolor").hide();

}
else if ($("#countertype option:selected").text() == "Marble"){
$("#granitecolor").hide();
$("#marblecolor").show();

}
else if ($("#countertype option:selected").text() == "Soapstone"){
$("#granitecolor").hide();
$("#marblecolor").hide();

}
});
});