如何使用 JQuery 从多个选择输入构建列表参数？

Question

我需要 POST 一个 JSON 字符串，其中包含来自多选表单的 1 个或多个值的列表。在我提出的 JQuery 解决方案中，我获取了列表中选定的所有值，但它们作为单独的参数返回。

$(document).ready(function() {
  $("#fooForm").submit(function(event) {
    event.preventDefault();         
    var $form = $(this),
    loc = $form.find('input[name="location"]').val(),
    url = $form.attr('action'),
    keys = $('#people :selected').map(function(){return $(this).val();}).get();
    $.post(url, {people:keys, location:loc},
        function(data) {
          $("#result").html(data);
        }
    );
  });
});

<form id="fooForm" method="" action="/api/people/location">
  <input type="hidden" name="location" value="{{location}}" />
  <select id="people" multiple size=4>
   <option value="{{a.key}}">{{a.name}}</option>
   <option value="{{b.key}}">{{b.name}}</option>
   <option value="{{c.key}}">{{c.name}}</option>
   <option value="{{d.key}}">{{d.name}}</option>
  </select> 
  <input type="submit" value="Submit" />    
</form>

如果选择三个人，这会产生以下参数：

location     91.001,-11.23
people[] agxzdXBlcmxhcnAtc2ty_foo
people[] agxzdXBlcmxhcnAtc2ty_spam
people[] agxzdXBlcmxhcnAtc2ty_eggs

我希望有一个包含三个关键值的人员参数。

---

更新 这是我想出的最优雅的解决方案：

$(document).ready(function() {
  $("#fooForm").submit(function(event) {
    event.preventDefault();         
var dataToBeSent = $("#fooFoorm").serialize();
var url = $("#fooForm").attr('action');
    $.post(url, dataToBeSent,
        function(data) {
          $("#result").html(data);
        }, "json"
    );
  });
});

<form id="fooForm" method="" action="/api/people/location">
  <input type="hidden" name="location" value="{{location}}" />
  <select name="people" multiple size=4>
   <option value="{{a.key}}">{{a.name}}</option>
   <option value="{{b.key}}">{{b.name}}</option>
   <option value="{{c.key}}">{{c.name}}</option>
   <option value="{{d.key}}">{{d.name}}</option>
  </select> 
  <input type="submit" value="Submit" />    
</form>

Answer 1

在参数中发送列表的标准方法是为列表中的每一项使用一个参数（然后按照惯例将该参数命名为“whatever[]”以表明它是一个列表）。

另外，你确实应该为你的 SELECT 使用名称，而不是 id；页面上不应该有多个具有相同 ID 的元素，并且 name 实际上是“命名”表单数据的属性。

完成您想要做的事情的一种更简单的方法是使用 jQuery 序列化方法。这会让你这样做：

keys = $("#fooForm").serialize()

但是，我很确定它也会做多个参数的事情，所以如果你真的必须有一个参数，那么你就只能做类似的事情：

keys = ""
$('#people :selected').each(function(){
    keys += $(this).val() + ",";
});
// Strip off the trailing comma if present

Answer 2

也许用逗号连接键数组？