javascript - Check boxes hidden unless a drop down value is selected -

i have form in cms system developing. in form have 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 drop down menu. want when select shopping, word why appear. cannot seem make work. have seen examples don;t know not doing wrong. understand have use javascript don't know , put it. understand new in rails , use help.

the javascript code use placed in places.js inside assets\javascripts folder

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

i have above css

.hidden_option { display: none; } 

in application.js file have put

$(document).ready(function(){    your_new_method(); //calls method created set unobtrusive js }); 

you seem missing id defined on select box.

place javascript inside function , js file , store in same directory find application.js file. similar following:

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

inside application.js there should method following. if doesnt exist can add it.

$(document).ready(function(){    your_new_method(); //calls method created set unobtrusive js });