除非选择下拉值,否则隐藏复选框

时间:2013-07-18 12:14:15

标签: javascript ruby-on-rails

我正在开发的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
});

1 个答案:

答案 0 :(得分:0)

您似乎缺少选择框中定义的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
});