除非选择了下拉值，否则将复选框隐藏

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 
});