如何将逗号分隔的多选值传递到表单提交的网址

Question

我的项目中有一个基本的 GET 表单，用于过滤用户创建的帖子。当我提交表单时，多重选择输入中的值将附加到 url 中，如下所示：

project.dev/?maps[]=1&maps[]=2&maps[]=3

如您所见，这些值通过三个单独的键值对传递到 url...但是，我想知道如何按以下格式将值附加到 url：

project.dev/?maps=1,2,3

提前致谢。

Answer 1

我找到了解决这个问题的方法，并认为我会分享它，希望能帮助其他人将来克服同样的问题。

HTML

<select id="region" name="region" multiple>
    <option value="1">Region 1</option>
    <option value="2">Region 2</option>
    <option value="3">Region 3</option>
</select>

<select id="maps" name="maps[]" multiple>
    <option value="1">Map 1</option>
    <option value="2">Map 2</option>
    <option value="3">Map 3</option>
</select>

<button id="search">Search</button>

JavaScript

<script>
    $(function() {
        $("#search").click(function() {
            var params = {};
            var getSelect = ['region', 'maps'];

            $.each(getSelect, function(index, value) {                  
                var select = $('#' + value);

                if (select.val() != '') {
                    var selected = select.val();

                    if (select.attr('multiple'))
                        selected = selected.join(',');

                    params[value] = selected;
                }
            });

            if (!$.isEmptyObject(params)) {
                var url = [location.protocol, '//', location.host, location.pathname].join('');

                window.location.href = url + '?' + $.param(params);
            }
        });
    });
</script>

Answer 2

假设您正在尝试发送一个数组，那么 Array.prototype.join 怎么样？

var arr = [1, 2, 3];

console.log(arr.join(','));

// result: 1,2,3

Answer 3

这是另一种方法：

var form = document.getElementById('test');
form.addEventListener('submit', function(event) {
    var parameters = {};
    var formData = new FormData(form);
    console.log(formData);
    for (var item in Object.fromEntries(formData)) {
        var value = formData.getAll(item);
        if (value.length === 1 && value[0] === '') {
            continue;
        }

        parameters[item] = value.join(',');
    }
    var urlParameters = Object.entries(parameters).map(([key, value]) => `${key}=${value}`).join('&');
    event.preventDefault();
    window.location.href = `${event.target.action}?${urlParameters}`
});