フォーム送信時にカンマ区切りの複数選択値をURLに渡す方法

Question

ユーザーが作成した投稿をフィルタリングするために使用する基本的なGETフォームがプロジェクトにあります。私は、フォームを送信すると、複数選択の入力から値がそうのようなURLに付加されます：

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

あなたが見ることができるように、値は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