Question

我有一个chrome扩展，当我点击它时，它会点击页面上所有相同的元素按钮，然后在功能完成后，我希望它选择下拉列表中的所有'P'。我在页面上有多个'pf'类，需要将所有的设置为P.第一个函数正在工作，当它到达第二个函数时，会出现一个错误，表明option.length未定义。我的问题是如何在课堂上获得所有选项计数？

function clickUpdate(_callback) {
    var updateArray = document.getElementsByClassName("updateButton");
[].slice.call(updateArray).forEach(function(item) {
    item.click();
});
console.log("this is the array legnth: " + updateArray.length);
_callback();
}

//Get select object
var objSelect = document.getElementsByClassName("pf");

//Set selected
setSelectedValue(objSelect, "P");

function setSelectedValue(selectObj, valueToSet) {
    clickUpdate(function(){
        console.log("I am done with the first function");
    });
for (var i = 0; i < selectObj.options.length; i++) {
    if (selectObj.options[i].text == valueToSet) {
        selectObj.options[i].selected = true;
        return;
    }
}
}

<select class="pf"> 
<option selected="selected" value="">Not Run</option>   
<option value="P">Pass</option> 
<option value="F">Fail</option> 
<option value="N">N/A</option></select>

Answer 1

这是你的问题：

//Get select object
var objSelect = document.getElementsByClassName("pf");

这不仅仅返回选择下拉列表 - it returns an HTMLCollection（即一组元素），其中与该类名称匹配的任何元素。即使只有一个礼物，它也会作为一个系列回归。但是你的setSelectedValue函数不期望一个集合，只是一个元素 - 这就是你得到undefined错误的原因。

有几种方法可以解决这个问题，具体取决于您在页面上其他位置所做的事情：

您可以使用document.querySelector('.pf')返回该类的第一个元素 - 如果您在页面上只有一个.pf，或者只想要管理其中一个。
或者，您可以使用document.getElementsByClassName('pf')[0]来实现相同的目标。
或者您可以选择id并使用document.querySelector('#pf')或document.getElementById('pf')
另一方面，如果您计划有多个.pf元素都以这种方式工作......您将不得不首先进行一些重构。但这是另一场讨论。

Javascript选择类中的下拉选项

1 个答案: