如何檢查 URL 中的查詢並使下拉列表選擇該值？

Question

舉例來說，我的 URL 可以附加一個查詢字符串（即“&sort=”）。 如何檢查該查詢值，然后使下拉列表顯示相同的選定值？

例子：

URL 可以是：example.com/Pages/default.aspx?Type=2&sort=price

如果未選擇任何內容，則或排序可能不存在。

<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>

我需要在 URL 中采用該排序值並進行設置：

<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>

謝謝。

Answer 1

// 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;"
      }
    });
  }
}