更改下拉列表时替换 URL 查询字符串值

Posted 2023-02-22

【中文标题】更改下拉列表时替换 URL 查询字符串值

【英文标题】：replace URL querystring value on change of dropdown

【发布时间】：2012-02-15 05:43:42

【问题描述】：

我有一个具有双重作用的下拉菜单。用户可以直接进入页面（http://mysite/events/Pages/default.aspx）并使用下拉菜单，或者他们可以先进行搜索，然后通过选择下拉菜单进一步过滤搜索结果。 第一个案例 URL 就像 http://mysite/events/Pages/default.aspx?hos=Carmel 和 第二种情况网址 http://mysite/events/Pages/default.aspx?kwd=health&type=Events&hos=Carmel 这就是我现在正在做的事情，但它的行为很奇怪，并且像这样对 url http://mysite.events/Pages/default.aspx?hos=Crown&hos=Carmel

因此，如果用户第一次从下拉列表中选择了 carmel，并决定要查找 Indianapolis，那么它应该将 'Carmel' 替换为 indianapolis，或者将整个 querstring "&hos=Carmel" 替换为 "&hos=Indianapolis" " 用于第二种情况，"?hos=Carmel" 和 "?hos=Indianapolis" 用于第一种情况

$(".hospitalDropDown").change(function(e)
            var querystring=window.location.search;
            var currentURL=$(location).attr('href');
            if(location.href.indexOf('?') == -1) 
                window.location.href= 'http://mysite/events/Pages/default.aspx'+'?hos='+$(this).val();
                
                else

                    window.location.href = ( $(this).val() == "All Hospitals" ) ? 'http://mysitesite/events/Pages/default.aspx': location.href +'&hos='+ $(this).val(); 
    );

我发现了一些使用正则表达式来处理查询字符串的漂亮代码，但我不明白正则表达式是如何工作的。在我的情况下如何使用如下所示的东西？

function replaceQueryString(url,param,value) 
    var re = new RegExp("([?|&])" + param + "=.*?(&|$)","i");
    if (url.match(re))
        return url.replace(re,'$1' + param + "=" + value + '$2');
    else
        return url + '&' + param + "=" + value;

【参考方案1】：

你需要做这样的事情：

function replaceQueryString(url,param,value) 
    var re = new RegExp("([?|&])" + param + "=.*?(&|$)","i");
    if (url.match(re))
        return url.replace(re,'$1' + param + "=" + value + '$2');
    else
        return url + '&' + param + "=" + value;


$(".hospitalDropDown").change(function(e) 
   window.location.href = replaceQueryString(window.location.href, 'hos', $(this).val());
);

你找到的replaceQueryStringsn-p 已经为你打包成一个简洁的小函数，所以你不需要知道任何关于正则表达式的知识就可以使用它。您需要做的就是将该函数传递给您的 url、您尝试更改的参数（“hos”）和新值。

另外，$(location).attr('href') 不是真的有效，而且你也没有使用它，所以只需将其取出并坚持使用 window.location.href。

最后，尽管在这种特殊情况下您不需要任何正则表达式知识，但您肯定可以从学习至少一些基本的正则表达式语法中受益。查看http://www.regular-expressions.info/ 以获得一些很好的解释，然后使用像http://www.regextester.com/ 这样的正则表达式测试器来处理示例并尝试自己编写一些示例。

【讨论】：

忽略了你实际上回答了这个问题——也许你应该把你的答案放在解释前面

另外我建议更改 window.location 因为 window.location.href 是当前 url 的字符串表示 - 所以更改.href 但设置位置对象

【参考方案2】：

$(".hospitalDropDown").change(function(e)
    var newhos=($(this).val() == "All Hospitals" ) ? '' : '$1hos=' + $(this).val();
    location.href=location.href.replace(/([\?\&])hos=\w+/,newhos);
);