使用 Javascript 将多个 select 选项添加到 url 参数

Question

我想要一个带有多个下拉过滤器的博客风格页面。当用户更改时，我想执行一个 onChange 事件，向 URL 添加一个参数，然后调整内容。我很想用 AJAX 来做到这一点，但我想先让这个功能发挥作用。

这是基本形式：

<form action="" method="GET">
    <select name="channel">
            <option value="" selected>Choose Channel</option>
            <option value="facebook-ads">Facebook ads</option>
            <option value="instagram-ads">Instagram ads</option>
    </select>
        <select name="brand">
            <option value="" selected>Choose Brand</option>
            <option value="brand-1">brand 1</option>
        </select>
</form>

当它是一个 selet 时，我只是使用了内联 onchange 事件。

我正在寻找 url 更改为这样的示例：

示例url.com/blog/?channel=facebook-ads&brand=brand-1

我希望能够有一个脚本，允许在选择值时将其中一个或两个添加到 URL。我不想使用提交按钮。

因此，如果 URL 中已经有一个参数并且用户从另一个下拉列表中选择了一个值，那么该参数将被添加到 URL 而不会删除另一个值。

真的希望有人能帮我解决这个问题，因为经过一天的搜索和尝试，我仍然没有进一步。

Answer 1

满足您需求的简单解决方案：

<form action="" method="GET" id="myForm">
    <select name="channel" id="0" onChange="changeURL(0)">
            <option value="" selected disabled>Choose Channel</option>
            <option value="facebook-ads">Facebook ads</option>
            <option value="instagram-ads">Instagram ads</option>
    </select>
        <select name="brand" id="1" onChange="changeURL(1)">
            <option value="" selected disabled>Choose Brand</option>
            <option value="brand-1">brand 1</option>
            <option value="brand-2">brand 2</option>
            <option value="brand-3">brand 3</option>
        </select>
</form>
<p id="test"></p>
<script>

var filters = [,]; // create an array with empty values (only 2 in this case)

function changeURL(a) {
    var yourUrl = "https://yourdomain.com"; // your url
    filters[a] = document.getElementById(a).value; // set the value of the selected filter inside the array
    var preFilter = "?"; // blank url will need a "?" to start with your filters
    for(var i=0; i<filters.length; i++) {
        aName = document.getElementById(i).name; // get the name of the filter
        yourUrl += preFilter + aName + "=" + filters[i];
        preFilter = "&";  
    }
    document.getElementById("test").innerHTML = yourUrl; // test output of the new url
}
</script>

使用 Javascript 将多个 select 选项添加到 url 参数

Add multiple select options to url paramter with Javascript

javascript

drop-down-menu