How do I check a query in the URL and make a dropdown select that value?

Question

Say for instance that my URL could have an appended query string (i.e. "&sort="). How can I check for that query value and then make a drop-down list show the same selected value?

Example:

URL could be: example.com/Pages/default.aspx?Type=2&sort=price

or sort may not exist if nothing has been selected.

<select name="SortBy" id="SortBy">
  <option selected="selected" value="Item Number">Item Number</option>
  <option value="Price">Price</option>
  <option value="Weight">Weight</option>
  <option value="Date">Date</option>
</select>

I need to take that sort value in the URL and set instead:

<select name="SortBy" id="SortBy">
  <option value="Item Number">Item Number</option>
  <option selected="selected" value="Price">Price</option>
  <option value="Weight">Weight</option>
  <option value="Date">Date</option>
</select>

Thanks.

Part of answer i guess: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — A. Wolff, Apr 24 '14 at 15:42
This is something you really should consider doing on the serverside. — adeneo, Apr 24 '14 at 15:47
`dropdownlist.Items.FindByValue( Request.QueryString("sort") ).Selected = true;` — adeneo, Apr 24 '14 at 15:51

Brad Christie · Accepted Answer · 2014-04-24T16:59:04.913

0

// check for query parameters
if (window.location.search){
  // grab the `sort=foo` portion
  var sort = window.location.search.match(/sort=([^&]+)/);
  // check if it's there
  if (sort){
    // get the value portion
    var sortValue = sort[1].toLowerCase();
    // because there's a potential cASe difference, iterate over the options
    // and mark the matching entry based on value
    $('#SortBy option').each(function(){
      var $option = $(this);
      if ($option.prop('value').toLowerCase() == sortValue){
        $option.attr('selected','selected');
        return false; // "break;"
      }
    });
  }
}

edited Apr 24 '14 at 16:59

answered Apr 24 '14 at 15:48

Brad Christie

100,477
16
156
200

I'm able to log the query to the console, and it appears correct, but the code to select the option is not working. Any ideas? – Justin Hollender Apr 24 '14 at 16:05
try `.prop('value')` over `.val()`. `.val` may only work from the ` – Brad Christie Apr 24 '14 at 16:59

How do I check a query in the URL and make a dropdown select that value?

1 Answers1