title: Show/hide div based on selected option value in Javascript
body: <p>I wonder why it isn't working.</p>
  
  <p>Here is my JS:</p>
  
  <pre><code>$("#cat-code").change(function(){
    var value = $("#cat-code option:selected").val();
    if (value == "10400000"){
      $("#div1").show();
      $("#div2").hide();
    }
  });
  </code></pre>
  
  <p>Select Tag:</p>
  
  <pre><code>&lt;select class="cat-code" id="cat-code" name="project_procurement_management_plan[items_attributes][0][category_id]"&gt;
    &lt;option value="1"&gt;10400000&lt;/option&gt;
    &lt;option value="2"&gt;10401000&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Divs to show or hide:</p>
  
  <pre><code>&lt;div class="div1"&gt;hi&lt;/div&gt;
  &lt;div class="div2"&gt;hello&lt;/div&gt;
  </code></pre>
  
  <p>Any workarounds will be appreciated. Thanks.</p>