javascript - JS : Create comma separated values from values of multiple inputs

Question

所以我有这段代码

myTask[] 是这样的一个选择选项

<select name="myTask[]" class="myTask" id="myTask1">
 <option value="1">Task1</option>
 <option value="2">Task1</option>
 <option value="3">Task1</option>
</select>


<select name="myTask[]" class="myTask" id="myTask2">
 <option value="1">Task1</option>
 <option value="2">Task2</option>
 <option value="3">Task3</option>
</select>

<select name="myTask[]" class="myTask" id="myTask3">
 <option value="1">Task1</option>
 <option value="2">Task2</option>
 <option value="3">Task3</option>
</select>

并使用此代码轻松获取这些 select 的值。

JavaScript

var task = document.getElementsByName('myTask[]');
for (var i = 0, iLen = task.length; i < iLen; i++) {
    alert(task[i].value);
}

但我想将它们存储在一个用逗号分隔的 var 中。

如果用户从不同的select中选择了不同的task

var 的值应该是这样的

var arrTask = [2, 3, 1];

我正在尝试将 3 个 select 中的所有选定值存储到 1 个 var

Answer 1

使用 Array.from 将类数组对象(如 myTask[] 元素的集合)转换为数组，同时通过映射器函数将其传递给提取每个选择元素的 .value:

window.onchange = () => {
  const arrTask = Array.from(
    document.getElementsByName('myTask[]'),
    select => select.value
  );
  console.log(arrTask);
};

<select name="myTask[]" class="myTask" id="myTask1">
 <option value="1">Task1</option>
 <option value="2">Task2</option>
 <option value="3">Task3</option>
</select>


<select name="myTask[]" class="myTask" id="myTask2">
 <option value="1">Task1</option>
 <option value="2">Task2</option>
 <option value="3">Task3</option>
</select>

<select name="myTask[]" class="myTask" id="myTask3">
 <option value="1">Task1</option>
 <option value="2">Task2</option>
 <option value="3">Task3</option>
</select>