title: Option value not changing with user selection
body: <p>I have a form with the following dropdown selection menu in HTML:</p>
  
  <pre><code>&lt;div class="input-field col s4"&gt;
      &lt;select id="disposition" required&gt;
          &lt;option value="No_Sale" id="noSale"&gt;No Sale&lt;/option&gt;
          &lt;option value="Sale" id="yeahSale"&gt;Sale&lt;/option&gt;
          &lt;option value="Unreachable" id="noContact"&gt;Unreachable&lt;/option&gt;
          &lt;option value="Call_Back" id="callBack"&gt;Call Back&lt;/option&gt;
      &lt;/select&gt;
      &lt;label&gt;Disposition&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The above snippet for dispositions should affect whether or not other form elements are disabled. However, I cannot seem to get the value to change on user input. </p>
  
  <p>Here is the javascript with jQuery: </p>
  
  <pre><code>$(document).on('change', 'select', function(){
      console.log(disposition);
      console.log($("#yeahSale").selected == true);
  
      if ($("#yeahSale").selected == true) {
          $("#fund").removeAttr('disabled');
      }
  });
  </code></pre>
  
  <p>For both <code>$("#disposition").val()</code> and <code>$("#yeahSale").selected</code>, the <code>console.log</code> returns </p>
  
  <blockquote>
    <p>"No_Sale"</p>
  </blockquote>
  
  <p>and false when I click on the form element and select </p>
  
  <blockquote>
    <p>"Sale."</p>
  </blockquote>
  
  <p>The first thing I tried was:</p>
  
  <pre><code>    if (disposition == "Sale")
  </code></pre>
  
  <p>I have also tried:</p>
  
  <pre><code>var disposition = $("#disposition").find(":selected").text();
  </code></pre>
  
  <p>I've been searching stack exchange and google for answers for almost an hour but I haven't any success so far. My apologies if I just completely missed an extant question that's already been solved. </p>
  
  <p>Thanks for your help!</p>