Question

我需要添加条件，以便我的代码支持输入（1个按钮需要生成整个Json）。

我尝试过滤：

elements.tagName

但它给了我一个未定义的，我想这是因为

var elements = document.getElementsByClassName('selectVal');

返回节点列表。如何过滤或调整我的代码，以便相同的功能支持输入？

我需要将列表中的所选项目和输入中的字符串存储为一个按钮。

Answer 1

elements是您从getElementsByClassName获得的元素数组。您应该检查循环内elements[index]上的tagName。

添加输入（将selectVal替换为所有表单对象的更好的类）：

<input id="textbox" class="selectVal" value="text value">

您可以更改循环的内部部分以查找标记

...
var strSel = '';
if (element.tagName == 'SELECT')
    strSel = element.options[element.selectedIndex].text;
else if (element.tagName == 'INPUT')
    strSel = element.value;
...

Answer 2

正如@adeneo在上述评论中提到的那样，您可以使用querySelectorAll将多个选择器分隔为逗号,来获取.selectVal和input值：

document.querySelectorAll('.selectVal, input');

希望这有帮助。

function getSelectedItems(){
  var elements = document.querySelectorAll('.selectVal, input')

  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    if (element.tagName==='SELECT')
      console.log(element.options[element.selectedIndex].text);
    else
      console.log(element.value);
  }
}

<select id="Sobre" class="selectVal">
  <option value="1" selected>fasfaf</option>
  <option value="2">afsaf</option>
  <option value="3">Fraasfsafe</option>
</select>

<select id="asdafa" class="selectVal">
  <option value="1">fassad</option>
  <option value="2" selected>fasfsa</option>
  <option value="3">asdasf</option>
</select>

<select id="asdf" class="selectVal">
  <option value="1">fdsa</option>
  <option value="2">asdfg</option>
  <option value="3" selected>dsaf</option>
</select>

<input name="test" value='input value' />
<button onClick="getSelectedItems()">Añadir</button>

Answer 3

除了使用像jQuery这样的东西之外，我不知道过滤列表的优雅方式。您可能会遇到旧学校的解决方案：

var elements = document.getElementsByClassName('selectVal');
for (var i = 0; i < elements.length; ++i) {
    var element = elements[i];
    if (i.tagName == 'DIV') {
        // whatever
    }
}

也就是说，这会找到班级<div>的所有selectVal：

var elements = document.querySelectorAll('div.selectVal');

根据您的使用情况，这可能就足够了。

按标记名称过滤元素

3 个答案: