title: Set option 'selected' if url query string matches
body: <p>I have a select box that filters database results on a page. The value of each option is the query string, starting with ? and then the corresponding name/value pair of particular option selected. Like this:</p>
  
  <pre><code>&lt;select id="timeline-filter"&gt;
      &lt;option value="log"&gt;Show All&lt;/option&gt;
      &lt;option value="?l=Previewed"&gt;Show Previewed&lt;/option&gt;
      &lt;option value="?l=Edited"&gt;Show Edited&lt;/option&gt;
      &lt;option value="?l=Downloaded"&gt;Show Downloaded&lt;/option&gt;
      &lt;option value="?l=Replaced"&gt;Show Replaced&lt;/option&gt;
      &lt;option value="?l=Deleted"&gt;Show Deleted&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>For example, I need to do two things when a user selects an option such as "Show Previewed":</p>
  
  <p>1) I need the page to redirect to <code>http://example.com/results?l=Previewed</code>
  2) I need to set the option to <code>selected</code> for the "Show Previewed" so that the dropdown indicates that this is the current filter.</p>
  
  <p>I've read dozens of jQuery and Javascript articles that nearly get there but not quite. I've spent 3 hours researching this and trying all kinds of things, including using the Inspector to set breakpoints and watch variables and I just can't get it right. The following HTML and jQuery script gets #1 done, but not #2.</p>
  
  <pre><code>&lt;select id="timeline-filter" onchange="this.options[this.selectedIndex].value &amp;&amp; (window.location = this.options[this.selectedIndex].value);"&gt;
    &lt;option value="log"&gt;Show All&lt;/option&gt;
    &lt;option value="?l=Previewed"&gt;Show Previewed&lt;/option&gt;
    &lt;option value="?l=Edited"&gt;Show Edited&lt;/option&gt;
    &lt;option value="?l=Downloaded"&gt;Show Downloaded&lt;/option&gt;
    &lt;option value="?l=Replaced"&gt;Show Replaced&lt;/option&gt;
    &lt;option value="?l=Deleted"&gt;Show Deleted&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script&gt;
    $(document).ready(function() {
      var queryString = window.location.href.slice(window.location.href.indexOf('?')).split('?');
      $("#timeline-filter &gt; option").each(function() {
        if (this.value == queryString[0]) {
          this.selected = 'selected';
          /* ALTERNATE POSSIBILITY -- DOESN'T WORK EITHER
      $("#timeline-filter[value=this.value]").prop('selected',true)*/
        }
      });
    });
  &lt;/script&gt;
  </code></pre>