Question

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

＆＃13;

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

＆＃13;

获取所有选择元素的节点列表（无论其中一个是什么，我猜测都像一个数组？），我知道.selectedindex，但是我从那里开始了。

我希望获得如下输出：

3,4,6,1

我想在查询字符串中使用这些数据来做一些魔术。

感谢任何帮助。

＆＃13;

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

＆＃13;

	<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">
	</form>

＆＃13;

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仍然不安全，因此只需迭代每个选项的选项并获取所选的选项。尝试类似：

＆＃13;

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

＆＃13;

<form action="?page=test-options-page&something=0" method="POST">
		<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>
		</div>
		<input type="button" value="Add another dropdown" onClick="addInput('dynamicInput');">
		<input type="submit" value="Submit">
	</form>

＆＃13;

您可以使这项工作收集所有表单元素的值，并使用结果对象作为创建查询字符串的基础。

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

2 个答案: