Javascript 如何从多个select元素创建逗号分隔的列表

我有一种动态创建的单选项选择元素。我需要做的是创建这些元素的所有选定索引的列表，用逗号分隔。我正在使用

---

elements=document.getElementsByClassName（“我的类”）与
一样。选择选项
仍然不安全，只需迭代每个选择的选项并获取所选选项。尝试以下方法：


var selects=document.getElementsByClassName（'som-changecat-category-dropdown'）；
var value={}，select，id，optionValues；
对于（变量i=0；i

bli
布拉
布鲁
布莱姆
责备
布鲁姆
您只需要将节点列表转换为数组。
您可以在此处获得更多信息：

下面是完整的工作代码

注意额外的
按钮
i add和
getValue（）
method=）


选择类别
测试
测试2
获取逗号分隔的值
var计数器=1；
函数addInput（divName）{
var newdiv=document.createElement（'div'）；
var counterid=计数器；
var newdivid=“动态div-”+计数器id；
setAttribute（“id”，newdivid）；
oldelement=document.getElementById（'cat-drop-id'）；
newelement=oldelement.cloneNode（true）；
newdiv.innerHTML=“
”+newelement.innerHTML+”

”；
document.getElementById（divName）.appendChild（newdiv）；
计数器++；
}
函数删除摘要（元素删除）{
var elem=document.getElementById（elementtoremove）；
elem.parentNode.parentNode.removeChild（elem.parentNode）；
返回false；
}
函数getValue（事件）{
event.preventDefault（）；
//全部选择元素。
var selects=document.getElementById（'dynamicInput'）。querySelectorAll（'select'）；
//将节点列表转换为数组
var selectsArray=Array.prototype.slice.call（selects）
//现在您可以使用Array.prototype*
var result=selectsArray.map（select=>{
返回select.value；
})。加入（‘，’）；
//现在就用'result'做你想做的事。
控制台日志（结果）；
返回结果；
}
您可以发布您的html代码吗？请提供完整的代码-html、JS和CreationOne。我在WordPress中工作，PHP调用会获取一个下拉框列表，我可以随意克隆/删除克隆。有些代码是伪代码，这是功能测试。删除了php调用并添加了原始的选择元素HTML。代码段运行良好。感谢您的分享，这将生成我可以使用的输出。但是，另一个答案会根据需要创建列表，因此选择该列表作为答案。只需指出，使用
.slice
将节点列表转换为数组在IE8等旧浏览器中可能不起作用。但我想我们可以微笑着离开这一个bitsMix internet explorer中的代码有错误。它说这里有一个语法错误：var result=selectsArray.map（select=>{return select.value；}）.join（'，'）；我认为它指向=>符号。你能帮忙吗？它阻止了整个工作。问题解决了。必须把它变成一个函数行，用函数（select）替换select=>，它的“arrow function”是函数的一个较短语法。在ES6中引入。
<form action="?page=test-options-page&something=0" method="POST">
  <div id="dynamicInput">
    <select name="cat" id="cat-drop-id" class="som-changecat-category-dropdown">
      <option value="-1">Select category</option>
      <option class="level-0" value="1">test</option>
      <option class="level-0" value="2">test2</option>
    </select>
  </div>
  <input type="button" value="Add another dropdown" onClick="addInput('dynamicInput');">
  <input type="submit" value="Submit">
  <button onClick="getValue(event)">get comma seperated value</button>
</form>

<script>

  var counter = 1;
  function addInput(divName){
    var newdiv = document.createElement('div');
    var counterid = counter;
    var newdivid = "dynamic-div-"+counterid;
    newdiv.setAttribute("id", newdivid);
    oldelement = document.getElementById('cat-drop-id');
    newelement = oldelement.cloneNode(true);
    newdiv.innerHTML = "<br><select name='cat' id='cat-dropdown-id" + counterid + "' class='som-changecat-category-dropdown'>" + newelement.innerHTML + "</select><input type='button' id='remove-button-id" + counterid + "' value='Remove DUMMY' onclick='removeDummy(this.id);' /><br><br>";

    document.getElementById(divName).appendChild(newdiv);
    counter++;
  }

function removeDummy(elementtoremove) {
  var elem = document.getElementById(elementtoremove);
  elem.parentNode.parentNode.removeChild(elem.parentNode);
  return false;
}

function getValue(event) {
  event.preventDefault();

  // all select element.
  var selects = document.getElementById('dynamicInput').querySelectorAll('select');

  // convert nodeList to array
  var selectsArray = Array.prototype.slice.call(selects)

  // now you can use Array.prototype.*
  var result = selectsArray.map(select => {
    return select.value;
  }).join(',');

  // do what ever you want with `result` now.
  console.log(result);

  return result;
}


</script>