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);
 };

最近，我不得不在动态字段中添加一个名为“Methods”的<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
}

＆＃13;

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);
});

＆＃13;

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

＆＃13;

Answer 2

我们假设您的select元素具有名称属性options：

var attributes = document.getElementsByName("attribute[]");
var locations = document.getElementsByName("location[]");
var options = document.getElementsByName("options[]"); //<--------

var len = attributes.length;
var data = [];
for(var i = 0; i < len; i++){
   var element = {
     "Attribute": attributes[i].value,
     // Grab the texts of the selected options:
     options: Array.from(options[i].querySelectorAll('option:checked'), 
                         option => option.textContent),
     "Location": locations[i].value,
   };
   data.push(element);
}

请注意，您可以使用Array.from回调参数（和短箭头函数语法）来创建data数组：

var attributes = document.getElementsByName("attribute[]");
var locations = document.getElementsByName("location[]");
var options = document.getElementsByName("options[]");
var data = Array.from(attributes, (attrib, i) => ({
    Attribute: attrib.value,
    options: Array.from(options[i].querySelectorAll('option:checked'), 
                        option => option.textContent),
    Location: locations[i].value,
}));

使用具有多选字段的数组创建JavaScript对象

2 个答案: