复选框处于隐藏状态，除非选择了下拉值

Question

I have a form in a CMS system that I am developing. In this form I have the code:

<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>

which constructs a drop down menu. What I want to do is when I select Shopping, the word why appear. I cannot however seem to make it work. I have seen some examples but I don;t know what I am not doing wrong. I understand I have to use Javascript but I don't know what and where to put it. As you understand I am new in Rails and I could use the help.

The Javascript code I use is placed in places.js inside the assets\\javascripts folder

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

I also have the above css

.hidden_option {
display: none;
}

In the application.js file I have put

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

Answer 1

You seem to be missing the id defined on the select box.

Place the javascript inside a function and into a js file and store it in the same directory that you find the application.js file. Similar to the following:

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

Inside application.js there should be a method like the following. If it doesnt exist you can just add it.

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