除非選擇了下拉值，否則將複選框隱藏

Question

我在開發的CMS系統中有表單。在這個表格中我有這樣的代碼：

<div class="styled_select"> 
    <%= f.select :cat_type, [["Eat & Drink", "eat"], 
    ["Hotels & Bed & Breakfast", "hotel"], 
    ["Attractions & Museums", "attraction"], 
    ["Shopping", "shopping"], ["Art & Design", "art"], 
    ["Health & Beauty", "health"], ["Fix & Repair", "fix"], 
    ["Medical & Safety", "medical"]], {:id => "cat_selector"} %> 
</div> 

<div class="hidden_option"> 
why</div> 

它構成了一個下拉菜單。我想要做的是當我選擇購物時，爲什麼出現這個詞。但我似乎無法使它工作。我看過一些例子，但我不知道我沒有做錯什麼。我明白我必須使用JavaScript，但我不知道在什麼地方放置它。正如你所理解的，我是Rails的新手，我可以使用這些幫助。

我使用的JavaScript代碼放置在places.js資產\ JavaScript的文件夾

function your_new_method(){ 
    $("#cat_selector").change(function(){ 
     if($("#cat_selector").val() == "Shopping"){ 
      $(".hidden_option").fadeIn('fast'); 
     } 
    }; 
} 

我也有上面的CSS

.hidden_option { 
display: none; 
} 

在的application.js文件我已經把裏面

$(document).ready(function(){ 
    your_new_method(); //Calls the method you created to set up the unobtrusive js 
}); 

Answer 1

您似乎錯過了在選擇框中定義的ID。

將javascript放在一個函數中並放入一個js文件中，並將其存儲在與您找到application.js文件相同的目錄中。類似於以下內容：

function your_new_method(){ 
    $("#cat_selector").change(function(){ 
     if($("#cat_selector").val() == "Shopping"){ 
      $(".hidden_option").fadeIn('fast'); 
     } 
    }; 
} 

在application.js中應該有一個像下面這樣的方法。如果它不存在，你可以添加它。

$(document).ready(function(){ 
    your_new_method(); //Calls the method you created to set up the unobtrusive js 
});