带有url参数的jQuery切换div选择选项答案

【问题标题】：jQuery toggle div select option with url parameters带有url参数的jQuery切换div选择选项
【发布时间】：2011-07-24 21:38:42
【问题描述】：

我为数据表创建了一个高级过滤器。现在我想将选定的选项添加为 url 参数。所以每次选择一个选项时，url都会改变，如果页面被重新加载，它将根据url参数打开到选定的过滤器。

这是我目前所拥有的example...任何有关 url 参数的帮助将不胜感激。

【问题讨论】：

标签： jquery toggle html-select url-parameters

【解决方案1】：

使用 URL 的片段来执行此操作。这样您就可以在 javascript 中修改 URL 而无需重新加载页面。然后，当您点击刷新时，该片段会与 URL 保持一致。

因此，每次下拉值更改时，请像这样在 url 中设置值：

window.location.hash = '#somevalue'

然后，当页面加载时：

$(document).ready(function() {
   // access hash using window.location.hash and show/hide based on its value
}

【讨论】：

这对一个有用...但是如果选择了所有三个值会怎样
您可以在哈希中存储任何字符串。所以，要有创意......将值存储在逗号分隔的字符串中。当您需要那里的值时，用逗号分开以获得所选值的列表。

【解决方案2】：

在 .change() 函数中设置 url 值。这将每次替换当前的 url 哈希：

var urlArgs = $(".filterControl:visible").map(function()
{
    return this.id + "=" + $(this).val();
}).get().join("&");
location.href = "#" + urlArgs;

然后，onload，解析哈希：

$(function()
{
    $.each(location.hash.replace(/\#/, "").split("&"), function(filterArg)
    {
        var parts = filterArg.split("=");
        $("#" + parts[0]).val(parts[1]);
    });
});

顺便说一句，为了方便选择，此代码假定每个<select> 上都有一个filterControl 类。当然，您可以使用任何您喜欢的方法来选择它们。

【讨论】：

网址是否可以允许多个值（即 - ?d=Mon&c=12&s=FR）