title: Hide/Show <div> using javascript and select
body: <p>Please help me fix this problem. </p>
  
  <p>I have the following html:</p>
  
  <pre><code>&lt;form&gt;    
    &lt;select class="form-control" id="order_bid_ord_type"&gt;
      &lt;option value="market"&gt;market&lt;/option&gt;
      &lt;option selected="selected" value="limit"&gt;limit&lt;/option&gt;
    &lt;/select&gt;
    &lt;div id="bid_mo_container"&gt;
       Hello world   
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have the following javascript</p>
  
  <pre><code>$('#order_bid_ord_type').on('change', function() {
    if (this.value === 'market') {
      $('#bid_mo_container').show();
    } else if (this.value === 'limit') {
      $('#bid_mo_container').hide();
    }
  });
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>#order_bid_ord_type{
    display: none;
  }
  </code></pre>
  
  <p>My JS Fiddle is here</p>
  
  <p><a href="http://jsfiddle.net/D46Zb/59/" rel="nofollow">http://jsfiddle.net/D46Zb/59/</a></p>
  
  <p>And here is what I want to do: <strong>When I select market from the combo box, I want the hello world text to show. And when I select limit, I want it to disappear</strong></p>
  
  <p>Right now, nothing happens when I change my selection. Can you help me figure out where the problem with my code is?</p>