Как создать список, разделенный запятыми, из нескольких элементов выбора 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>

Вы могли бы сделать эту работу, чтобы собрать значения всех элементов формы и использовать полученный объект в качестве основы для создания вашей строки запроса.