Set option 'selected' if url query string matches

Question

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>

BenG · Accepted Answer · 2016-02-03 15:53:19Z

2

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>

answered Feb 3, 2016 at 15:53

BenG

15.2k5 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3169905 Over a year ago

Ah! You're right. This worked. I only needed to remove the .split and the reference to the array. That's what happens the longer I stare at code. I miss the obvious things. Thanks!

Collectives™ on Stack Overflow

Set option 'selected' if url query string matches

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related