如何從多個選擇元素創建逗號分隔列表Javascript

Question

我有一種動態創建的單選項選擇元素的形式。我需要做的是創建這些元素的所有選定索引的列表，用逗號分隔。我使用

elements = document.getElementsByClassName("my-class");

搶一個節點列表（不管其中之一是，我猜像一個數組？）所有的選擇元素的，我知道。 selectedindex，但我堅持從那裏。

我想獲得一個輸出，如：

3,4,6,1

我想用這個數據在查詢字符串做一些魔法。

任何幫助表示讚賞。

var counter = 1; 
 
function addInput(divName){ 
 
\t var newdiv = document.createElement('div'); 
 
\t var counterid = counter; 
 
\t var newdivid = "dynamic-div-"+counterid; 
 
\t newdiv.setAttribute("id", newdivid); 
 
\t oldelement = document.getElementById('cat-drop-id'); 
 
\t newelement = oldelement.cloneNode(true); 
 
\t 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>"; 
 

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

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

\t <form action="?page=test-options-page&something=0" method="POST"> 
 
\t \t <div id="dynamicInput"> 
 
\t \t <select name="cat" id="cat-drop-id" class="som-changecat-category-dropdown"> 
 
\t \t \t <option value="-1">Select category</option> 
 
\t \t \t <option class="level-0" value="1">test</option> 
 
\t \t \t <option class="level-0" value="2">test2</option> 
 
\t \t </select> 
 
\t \t </div> 
 
\t \t <input type="button" value="Add another dropdown" onClick="addInput('dynamicInput');"> 
 
\t \t <input type="submit" value="Submit"> 
 
\t </form>

Answer 1

你只需要將nodeList轉換爲數組。 ，你可以在這裏得到更多的信息：https://davidwalsh.name/nodelist-array

以下是完整的工作代碼。

通知額外button我添加和getValue()方法=）

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

Answer 2

由於.selectedOptions仍是不安全的去沒有什麼比遍歷每個選擇的選項，並獲得選擇的。嘗試是這樣的：

var selects = document.getElementsByClassName('som-changecat-category-dropdown'); 
 
var values = {}, select, id, optionValues; 
 
for (var i = 0; i < selects.length; i++) { 
 
    select = selects[i]; 
 
    id = select.id; 
 
    optionValues = []; 
 
    for (var j = 0; j < select.options.length; j++) { 
 
    var option = select.options[j]; 
 
    if (option.selected) optionValues.push(option.value); 
 
    } 
 
    values[select.id] = optionValues.join(','); 
 
} 
 
// gives you an object with the selects’ ids as keys 
 
//and the komma separated values as value 
 
document.write(JSON.stringify(values));

<form action="?page=test-options-page&something=0" method="POST"> 
 
\t \t <div id="dynamicInput"> 
 
    <select multiple id="cat-dropdown-1" class="som-changecat-category-dropdown"> 
 
    <option value="1" selected>bli</option> 
 
    <option value="2">bla</option> 
 
    <option value="3" selected>blu</option> 
 
    </select> 
 
    <select multiple id="cat-dropdown-2" class="som-changecat-category-dropdown"> 
 
    <option value="4">blimm</option> 
 
    <option value="5" selected>blamm</option> 
 
    <option value="6" selected>blumm</option> 
 
    </select> 
 
\t \t </div> 
 
\t \t <input type="button" value="Add another dropdown" onClick="addInput('dynamicInput');"> 
 
\t \t <input type="submit" value="Submit"> 
 
\t </form>

你可以做這項工作，收集所有的表單元素值，並使用所產生的對象作爲創建您的查詢字符串的魅力。