Set option 'selected' if url query string matches

问题

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:

<select id="timeline-filter">
    <option value="log">Show All</option>
    <option value="?l=Previewed">Show Previewed</option>
    <option value="?l=Edited">Show Edited</option>
    <option value="?l=Downloaded">Show Downloaded</option>
    <option value="?l=Replaced">Show Replaced</option>
    <option value="?l=Deleted">Show Deleted</option>
</select>

For example, I need to do two things when a user selects an option such as "Show Previewed":

1) I need the page to redirect to http://example.com/results?l=Previewed 2) I need to set the option to selected for the "Show Previewed" so that the dropdown indicates that this is the current filter.

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.

<select id="timeline-filter" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
  <option value="log">Show All</option>
  <option value="?l=Previewed">Show Previewed</option>
  <option value="?l=Edited">Show Edited</option>
  <option value="?l=Downloaded">Show Downloaded</option>
  <option value="?l=Replaced">Show Replaced</option>
  <option value="?l=Deleted">Show Deleted</option>
</select>

<script>
  $(document).ready(function() {
    var queryString = window.location.href.slice(window.location.href.indexOf('?')).split('?');
    $("#timeline-filter > 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)*/
      }
    });
  });
</script>

回答1:

your pretty much there, try this:-

$(document).ready(function() {
  var queryString = window.location.href.slice(window.location.href.indexOf('?'));
  $("#timeline-filter > option").each(function() {
    if (this.value == queryString) {
      this.selected = 'selected';
    }
  });
});

For your alternative, try this:-

var queryString = window.location.href.slice(window.location.href.indexOf('?'));
$("#timeline-filter > option[value='" + queryString + "']").prop('selected', true)

TEST BELOW

var href = "dfgdfgg.html?l=Replaced"

$(document).ready(function() {
  var queryString = href.slice(href.indexOf('?'));
  $("#timeline-filter > option").each(function() {
    if (this.value == queryString) {
      this.selected = 'selected';
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="timeline-filter" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
  <option value="log">Show All</option>
  <option value="?l=Previewed">Show Previewed</option>
  <option value="?l=Edited">Show Edited</option>
  <option value="?l=Downloaded">Show Downloaded</option>
  <option value="?l=Replaced">Show Replaced</option>
  <option value="?l=Deleted">Show Deleted</option>
</select>

来源：https://stackoverflow.com/questions/35181403/set-option-selected-if-url-query-string-matches

标签

jquery

drop-down-menu

html-select