如果网址查询字符串匹配，则将选项设置为“选定" [英] 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)我需要页面重定向到http://example.com/results?l=Previewed 2)我需要将显示预览"的选项设置为selected，以便下拉菜单指示这是当前过滤器.

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.

我已经阅读了几十篇关于jQuery和Javascript的文章，这些文章几乎可以到达那儿，但还不太到.我花了3个小时研究此问题并尝试了各种方法，包括使用Inspector设置断点和监视变量，但我做对了.以下HTML和jQuery脚本完成了#1的工作，但没有完成#2的工作.

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>

推荐答案

您可以在那儿尝试一下:-

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)

以下测试

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>

这篇关于如果网址查询字符串匹配，则将选项设置为“选定"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！