Question

我有几个菜单可以在当前链接中添加一个变量。这是一个例子：

<select onChange="window.location.href+=this.value">
  <option value="&numb=1">1</option>
  <option value="&numb=2">2</option>
  <option value="&numb=3">3</option>
</select>

<select onChange="window.location.href+=this.value">
  <option value="&cord=x">x</option>
  <option value="&cord=y">y</option>
  <option value="&cord=z">z</option>
</select>

我的问题是，如果我选择“y”2次，则会增加“＆amp; cord = y”2次。相反，我希望它替换该菜单中的当前值。因此，如果“＆amp; cord = x”已经存在，那么它只会将其更改为“＆amp; cord = y”，而不是向链接添加新变量。当然，如果我从＆amp; numb菜单中选择一个，它不应该从＆amp; cord菜单中替换一个。

可以这样做吗？如果是，那怎么办？

编辑：这是另一个例子。如果我有网址 “ www.google.com?cat=p&comp=x&type=1 ”并在我的选择框中选择“＆amp; comp = 3”，然后它将替换当前＆amp; comp与新的。如果没有设置＆amp; comp，它只会将＆amp; comp = 3（或我选择的任何内容）添加到网址。

Answer 1

这些函数可让您解析和编辑URL参数：

function splitObj(str, rowSplit, columnSplit) {
    var obj = {};
    var rows = str.split(rowSplit);
    for (var i = 0; i < rows.length; i++) {
        var kv = rows[i].split(columnSplit);
        if (kv.length === 1) {
            obj[kv[0]] = null;            
        } else {
            obj[kv[0]] = kv[1];
        }
    }
    return obj;
}

function joinObj(obj, rowSplit, columnSplit) {
    var rows = [];
    for (var name in obj) {
        if (name[obj] === null) {
            rows.push(name);            
        } else {
            rows.push(name + columnSplit + obj[name]);
        }
    }
    return rows.join(rowSplit);
}

function setUrlParam(name, value) {
    var parts = window.location.href.split('?');
    var urlbase = parts[0];
    var params = {};
    if (parts.length > 1) {
        params = splitObj(parts[1], '&', '=');
    }
    params[encodeURIComponent(name)] = encodeURIComponent(value);
    window.location.href = urlbase + '?' + joinObj(params, '&', '=');
}

function changeURL(elem) {
    var kv = elem.value.slice(1).split('=');
    setUrlParam(kv[0], kv[1]);
}

然后你可以这样做：

<select id="select" onChange="changeURL(this);">
    <option value="&cord=x">x</option>
    <option value="&cord=y">y</option>
    <option value="&cord=z">z</option>
</select>

<强>更新

您可以以牺牲可读性为代价来删除splitObj和joinObj。

function setUrlParam(name, value) {
    var parts = window.location.href.split('?'), params = {};
    if (parts.length > 1)
        parts[1].split('&').forEach(function(x){ 
            var p = x.split('='); 
            params[p[0]] = (p.length > 1) ? p[1] : null; 
        });
    params[encodeURIComponent(name)] = encodeURIComponent(value);
    window.location.href = parts[0] + '?' + Object.keys(params).map(function(x){ 
        return (params[x] === null) ? x : (x + '=' + params[x]); 
    }).join('&');
}

function changeURL(elem) {
    var kv = elem.value.slice(1).split('=');
    setUrlParam(kv[0], kv[1]);
}

Answer 2

您将添加一个if语句，以便检查窗口中是否已存在值。通过这样做，您可以将值替换为当前值。

Answer 3

将window.location.href更改为window.location.origin

<select onChange="window.location.href=window.location.origin+this.value">

fiddle

Answer 4

编辑请执行以下操作：http://jsfiddle.net/63s8eb70/5/

set file_loc=c:\COMports.txt

for /f "tokens=1,3 delims=\" %%a in (%file_loc%) do set %%b=%%a

JS

<select onChange="makeUrl()">
  <option value="?numb=1">1</option>
  <option value="?numb=2">2</option>
  <option value="?numb=3">3</option>
</select>

<select id="select" onChange="makeUrl();">
    <option value="&cord=x">x</option>
    <option value="&cord=y">y</option>
    <option value="&cord=z">z</option>
</select>

<br><br>

<div id="cu"></div>

Answer 5

此函数接受a参数和值，并将其添加到URL或更新参数（如果已存在）。

audioFormat.mFormatFlags        = kAudioFormatFlagsCanonical;

Answer 6

明智的做法是为您的输入元素指定一个name属性，指明您尝试更改的参数的名称，这样您就不会重复numb=部分和coord=一遍又一遍。考虑这样的事情，它允许您参数化您尝试更改的查询键的名称：

<select name="numb" onChange="updateSearch(event)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select name="coord" onChange="updateSearch(event)">
  <option value="x">x</option>
  <option value="y">y</option>
  <option value="z">z</option>
</select>

通过这种方式，您可以创建任意数量的输入元素，并为onchange使用相同的事件处理程序。

相应的javascript可能如下所示：

function updateSearch(event) {
    var param = event.target.name;
    var value = event.target.value;
    var params = parseQuery(window.location.search);

    params[param] = value;

    window.location.search = buildQuery(params);
}

function parseQuery(querystring) {
    if (!querystring) { return {}; }
    var pairs = querystring.replace(/^\?/, '').split('&');
    var params = {};
    var pair;
    var i;

    for (i = 0; i < pairs.length; i++) {
        pair = pairs[i].split('=');
        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return params;
}

function buildQuery(params) {
    var pairs = [];
    var key;
    for (key in params) { 
        if (!params.hasOwnProperty(key)) { continue; }
        pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]));
    }
    return pairs.join('&');
}

这里的一些冗长是安全地处理URL中的一串序列化参数，而不使用大量的字符串操作。考虑那些可以为您想要获取的实例重用的函数，或者从客户端设置一些查询参数。

这是一个jsFiddle：https://jsfiddle.net/8fftmwzn/20/

此实现（当然）不会处理设置URL查询字符串中已有内容的输入。这是一个单独的挑战。

Javascript网址修改

6 个答案: