JS：從多個輸入的值創建逗號分隔值

Question

所以我有這個代碼

myTask[]是這樣的 select 選項

<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將類似數組的 object（如myTask[]元素的集合）轉換為數組，同時將其傳遞給映射器 function 以提取每個 Z99938282F040718599Z1E1 元素的.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>