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

Check boxes hidden unless a drop down value is selected

本文关键字：选择 隐藏 复选框      更新时间：2023-09-26

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

其构造下拉菜单。我想做的是，当我选择"购物"时，会出现"为什么"这个词。然而，我似乎无法让它发挥作用。我见过一些例子，但我没有；I don’我不知道我做错了什么。我知道我必须使用Javascript，但我不知道该把它放在什么地方。

我使用的Javascript代码放在assets''Javascript文件夹内的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
});

您似乎缺少在选择框中定义的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
});
相关文章：