javascript - 复选框隐藏，除非选择下拉值

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 代码放在 assets\javascripts 文件夹内的 places.js 中

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