JQuery 根据 HTML 下拉列表选择查找并替换 URL 中的查询字符串

JQuery Find And Replace Query String in URL Based on HTML Dropdown Selection

本文关键字：URL 查询 字符串 替换 HTML 根据 下拉列表 选择 查找 JQuery      更新时间：2023-09-26

我想使用 jquery 根据页面上下拉选项中选择的内容查找和替换该值来更改查询字符串中的特定值。例如：

假设我们在当前页面上有以下查询字符串：？field1=value1&field2=value2&archived=yes

下拉选项为：

  • 未存档
  • 存档

如果有人选择"非存档"，jquery 函数应该对当前查询字符串进行查找和替换，并将 archived=yes 设置为 archived=no，然后刷新页面。

这是我现在拥有的一些代码，但它不进行查找和替换，它只是获取我从下拉列表中选择的值，然后根据下拉 html 中设置的选项值更改页面。

<script type="text/javascript" src="/js/jQuery.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("#dropdown").change(function(e){
window.location.href = jQuery("#dropdown").val();
});});
</script>

<select class="dropdown" id="dropdown">
<option value="#" selected="selected">Choose Type</option>
<option value="(set archived=no)">Non-Archived</option>
<option value="(set archived=yes)">Archived</option>
</select>

任何帮助将不胜感激！

试试这个

jQuery 

jQuery(document).ready(function () {
    jQuery("#dropdown").change(function (e) {
        if (window.location.href.indexOf("archived") > -1) {
            window.location.href.replace(/(archived=yes|archived=no)/g, "archived=" + jQuery("#dropdown ").val());
        } else {
            window.location.href += "archived=" + jQuery("#dropdown ").val();
        }
    });
});

.HTML

<select class="dropdown" id="dropdown">
<option value="#" selected="selected">Choose Type</option>
<option value="no">Non-Archived</option>
<option value="yes">Archived</option>
</select>
这

似乎有效：

JSFiddle Demo

var href="?field1=value1&field2=value2&archived=yes";
var testUrl = $(location).attr('href');
alert('Current URL = ' + testUrl);
jQuery("#dropdown").change(function(e){
    if($("#dropdown").val() == "(set archived=no)") {
        href = href.replace("archived=yes", "archived=no");
    } else if($("#dropdown").val() == "(set archived=yes)") {
        href = href.replace("archived=no", "archived=yes");
    }
    alert(href);
    window.location.href = href;
});
相关文章：