在JavaScript(Vanilla或JQuery)中序列化数据时，如何获得多个选择选项

Question

我编写了以下功能，该功能将DIV/表单变成序列化对象。我使用此返回将其传递到我的数据库JavaScript调用方法中。

Tater.prototype._formToObject = function(formData) {
    var p = {};
    jQuery.each(jQuery(formData).serializeArray(),function(i, e){
        p[e.name] = e.value;
    });
    return p;
};

唯一的问题是，如果我将表单更改为具有multiple选择选项，则仅抓住多个选择的第一个值。我将如何扩展以允许这种行为？

Answer 1

尝试使用这些行以获取值数组。如果您给我们一个工作的片段，可以更容易适应您想要的东西。您很可能需要在E上添加多个属性的检查(请参见下面的评论(否则做似乎正在起作用的当前逻辑在下面的逻辑中，将其替换为您的方案

`

Tater.prototype._formToObject = function(formData) {
    const p = {};
    jQuery.each(jQuery(formData).serializeArray(),function(i, e){
        //check for multiple attr
        e.getAttribute('multiple') == null ? 
            (p[e.name] = e.value) :
            (p[e.name] = $(e).val());
    });
    return p;
};

`

document.getElementById('multi').addEventListener('change', function () {
    //jquery
    this.getAttribute('multiple') != null && console.log($(this).val());
    //vanilla
    if(this.getAttribute('multiple') != null) {
      const arr = [], nodes = this.querySelectorAll(':checked');
      for(let i = 0; i < nodes.length; i++) {
          arr.push(nodes[i].value);
      }
      console.log(arr);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="multi">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<!-- from https://www.w3schools.com/tags/att_select_multiple.asp -->