javascript - 在类中选择下拉选项的Javascript

我有一个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>

最佳答案

这是您的问题：

//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 - 在类中选择下拉选项的Javascript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40274692/