javascript - 使用带有多选字段的数组创建 JavaScript 对象

Question

您好，我正在创建一个 JavaScript 对象来存储从某些字段捕获的值。我有动态字段，用户可以在其中添加更多字段到页面。

我可以使用以下代码捕获字段并将其存储在对象中。

var attributes = document.getElementsByName("attribute[]");
var locations = document.getElementsByName("location[]");

var len = attributes.length;
var data = []
for(var i = 0; i < len; i++){
   var element = {
     "Attribute": attributes[i].value,
     "Location": locations[i].value,
   };
   data.push(element);
 };

最近我不得不添加一个<select>动态字段中名为“方法”的字段，允许用户在下拉列表中选择多种方法。我正在努力解决如何获取每个“属性”的选定方法的数组。

非常感谢任何帮助。

Answer 1

您可以使用如下函数:

function extract(select) {
  var array = [];
  for (var i = 0; i < select.length; i++) {
    if (select.options[i].selected) array.push(select.options[i].value);
  }

  return array
}

document.querySelector('button').addEventListener('click', function() {
  var attributes = document.getElementsByName("attribute[]");
  var locations = document.getElementsByName("location[]");
  var methods = document.getElementsByName("methods[]");

  var len = attributes.length;
  var data = []
  for (var i = 0; i < len; i++) {
    function extract(select) {
      var array = [];
      for (var i = 0; i < select.length; i++) {
        if (select.options[i].selected) array.push(select.options[i].value);
      }

      return array;
    }

    var element = {
      "Attribute": attributes[i].value,
      "Location": locations[i].value,
      "Methods": extract(methods[i])
    };
    data.push(element);
  };
  
  console.log(data);
});

<input name='attribute[]' placeholder='attribute[]' value=''>
<input name='location[]' placeholder='location[]' value=''>
<select multiple name='methods[]'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
<p/>
<input name='attribute[]' placeholder='attribute[]' value=''>
<input name='location[]' placeholder='location[]' value=''>
<select multiple name='methods[]'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
<p/>
<button>Click me</button>