如何将逗号分隔的多选值传递给表单提交上的url

I have a basic GET form in my project that is used to filter through posts created by users. When I submit the form the values from the multiple select input are appended to the url like so:

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

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

As you can see, the values are passed to the url via three separate key value pairs... However, I would like to know how to append the values to the url in the following format:

如您所见,值通过三个单独的键值对传递给url ...但是,我想知道如何以下列格式将值附加到url:

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

Thanks in advance.

提前致谢。

2 个解决方案

#1

Assuming you're trying to send an array, how about Array.prototype.join?

假设您正在尝试发送数组,那么Array.prototype.join怎么样?

var arr = [1, 2, 3];

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

// result: 1,2,3

#2

I found a solution to this and thought I'd share it in hopes to help others overcome the same problem in the future.

我找到了解决方案,并认为我希望能够帮助其他人在未来克服同样的问题。

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>

#1