title: Using a DropDown value in jquery
body: <p>I need to send the value of the selected option in a <code>&lt;select&gt;</code> element in some jquery to send to my php file.</p>
  
  <p>Unfortunately, I keep getting an undefined value for it...</p>
  
  <pre><code>&lt;select name="query" id="query"&gt;
      &lt;option value="join-us"&gt;Join Us&lt;/option&gt;
      &lt;option value="work-with-us"&gt;Work with us&lt;/option&gt;
      &lt;option value="about-pf"&gt;About Planet Fitness&lt;/option&gt;
      &lt;option value="other"&gt;Other&lt;/option&gt;
  &lt;/select&gt;
  
  var query = $('#query option:selected').text();
  
  console.log('query = ' + query);
  </code></pre>
  
  <p>The console.log returns</p>
  
  <blockquote>
    <p>query = undefined</p>
  </blockquote>
  
  <p>I've tried using <code>$('#query').val();</code> and <code>$('#query').text();</code></p>
  
  <p>I don't know what else to do here.</p>
  
  <p>It seems to me that the <code>:selected</code> psuedoclass requires the option to appear as follows in the markup.</p>
  
  <pre><code>&lt;option value="bla" selected="selected"&gt;bla&lt;/option&gt;
  </code></pre>
  
  <p>Clearly, I'm missing these but changing the selection in the dropdown isn't changing this and I don't think there'd be any sense to adding it into the markup myself...</p>
  
  <p>Any assistance will be greatly appreciated</p>