使用具有多选择字段的数组创建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> 

Answer 2

假设您的select元素具有name属性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,
}));