如何將逗號分隔的多選值傳遞給表單提交時的網址

Question

我的項目中有一個基本的GET表單，用於過濾用戶創建的帖子。 當我提交表單時，來自多個選擇輸入的值將附加到url上，如下所示：

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

如您所見，這些值通過三個單獨的鍵值對傳遞給url ...但是，我想知道如何以以下格式將這些值附加到url：

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

提前致謝。

Answer 1

假設您要發送數組，那么Array.prototype.join怎么樣？

var arr = [1, 2, 3];

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

// result: 1,2,3

Answer 2

我找到了解決方案，並認為我會分享它，以希望將來幫助其他人克服相同的問題。

的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>