title: Get selected value of dropdown
body: <p>I'm having a rather different structure of HTML and I am trying to get the selected value of a dropdown list as seen in the below code:</p>
  
  <pre><code>&lt;div class="quantityDropdown quantityDropdown-cartItem"&gt;
      &lt;select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker"
              data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421"&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2" selected=""&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
          &lt;option value="4"&gt;4&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My code returns <code>null</code>.</p>
  
  <p>I want to get 2 as my value. As you can see, there's no value in the <code>selected</code> attribute.</p>
  
  <pre><code>var quantity = document.querySelector(".quantityDropdown select").getAttribute("selected");
  </code></pre>
  
  <p><strong>How do I get the value 2 that's outside the option tag?</strong></p>