如何使用 JQuery 从多个选择输入生成列表参数

How to build a List parameter using JQuery from multiple select inputs?

本文关键字：输入 列表 参数 选择 何使用 JQuery      更新时间：2023-09-26

我需要发布一个 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

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

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

$(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>

在参数中发送列表的标准方法是对列表中的每个项目使用一个参数（然后约定将该参数命名为"whatever[]"以指示它是一个列表）。

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

执行

您正在尝试执行的操作的一种更简单的方法是使用 jQuery 序列化方法。 这将允许您执行以下操作：

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

但是，我很确定这也可以完成多个参数的事情，所以如果你真的必须有一个参数，那么你就会被困在做这样的事情上：

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

也许用逗号连接键数组？

相关文章：