title: How can I determine what option is selected on a dropdown?
body: <p>I have a dropdown menu of values:</p>
  
  <pre><code>            &lt;select class="notifications-dropdown"&gt;
                  &lt;option value="val1"&gt;Val4&lt;/option&gt;
                  &lt;option value="val2"&gt;Val3&lt;/option&gt;
                  &lt;option value="val3"&gt;Val2&lt;/option&gt;
                  &lt;option value="val4"&gt;Val1&lt;/option&gt;
              &lt;/select&gt;
  </code></pre>
  
  <p>I want to make it so when a user selects one of the options from the dropdown, that option has a '<code>selected</code>' attribute toggled on. For example, if a user clicks the dropdown and selects Val3 then the DOM should change as follows: </p>
  
  <pre><code>            &lt;select class="notifications-dropdown"&gt;
                  &lt;option value="val1"&gt;Val4&lt;/option&gt;
                  &lt;option value="val2" selected&gt;Val3&lt;/option&gt;
                  &lt;option value="val3"&gt;Val2&lt;/option&gt;
                  &lt;option value="val4"&gt;Val1&lt;/option&gt;
              &lt;/select&gt;
  </code></pre>
  
  <p>I am not sure what jQuery event to listen for to know when a user selects an option though. I tried listening for a <code>change</code> event on the <code>.notifications-dropdown</code> but the generated event object does not give me any indication about which option was selected. How can I determine what option is selected on a dropdown?</p>