Question

我有一个选择框可以过滤页面上的数据库结果。每个选项的值是查询字符串，以？开头。然后选择特定选项的相应名称/值对。像这样：

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

例如，当用户选择“Show Previewed”等选项时，我需要做两件事：

1）我需要将页面重定向到http://example.com/results?l=Previewed 2）我需要为“显示预览”将选项设置为selected，以便下拉列表指示这是当前过滤器。

我已经阅读了几十篇jQuery和Javascript文章，这些文章几乎到了那里，但并不完全。我花了3个小时研究这个并尝试各种各样的事情，包括使用Inspector来设置断点和观察变量，我只是无法做到正确。以下HTML和jQuery脚本完成了＃1，但没有＃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>

Answer 1

你几乎在那里，试试这个： -

$(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';
    }
  });
});

作为替代方案，请尝试以下方法： -

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>

如果url查询字符串匹配，请设置选项'selected'

1 个答案: