在类中选择下拉选项的Javascript

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

这不仅返回选择下拉列表， 还返回带有与该类名称匹配的任何元素的HTMLCollection （即一组元素）。 即使只有一个礼物，它也会以收藏的形式回来。 但是您的setSelectedValue函数不希望集合，而只是单个元素-这就是为什么您会得到undefined错误的原因。

您可以通过几种方法来处理此问题，具体取决于您在页面上其他地方正在做什么：

• 您可以使用document.querySelector('.pf')返回该类的第一个元素-如果您仅在页面上拥有一个.pf ，或者只想管理其中一个，则可以执行此操作。
• 或者，您可以使用document.getElementsByClassName('pf')[0]实现相同的目的。
• 或者您可以给选择一个id并使用document.querySelector('#pf')或document.getElementById('pf')
• 另一方面，如果您打算有多个都可以通过这种方式工作的.pf元素，则必须首先进行一些重构。 但这是另外一个讨论。