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