Javascript zum Auswählen einer Dropdown-Option in einer Klasse

Question

Ich habe eine Chrome-Erweiterung, die, wenn ich darauf klicke, wird es alle die gleichen Element Schaltflächen auf einer Seite klicken und dann nach der Funktion ist, möchte ich alle auswählen 'P ist auf dem Dropdown. Ich habe mehrere 'pf' Klassen auf der Seite und muss alle auf P setzen. Die erste Funktion funktioniert, wenn es zur zweiten Funktion kommt, gibt es einen Fehler, der die Option zeigt. Length ist undefined. Meine Frage ist, wie bekommt man alle Optionen zählt in einer Klasse?

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

Hier ist Ihr Problem:

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

Das gilt nicht nur die Auswahl Dropdown zurückkehren - it returns an HTMLCollection (dh eine Gruppe von Elementen) mit beliebigen Elemente passend, dass die Klassennamen. Auch wenn es nur ein Geschenk gibt, kommt es als Sammlung zurück. Aber Ihre setSelectedValue Funktion erwartet keine Sammlung, nur ein einzelnes Element - deshalb erhalten Sie den undefined Fehler.

Es gibt ein paar Möglichkeiten, wie Sie damit umgehen können, je nachdem, was Sie an anderer Stelle auf der Seite zu tun:

• Sie können document.querySelector('.pf') verwenden, um das erste Element mit dieser Klasse zurück - dies tun, wenn Sie haben nur eine .pf auf der Seite oder möchten nur eine davon verwalten.
• Alternativ können Sie document.getElementsByClassName('pf')[0] verwenden, um das gleiche zu erreichen.
• Oder Sie geben die Auswahl ein id und verwenden document.querySelector('#pf') oder document.getElementById('pf')
• Wenn auf der anderen Seite Sie mehrere .pf Elemente haben, die alle arbeiten auf diese Weise ... Sie werden einige Umgestaltung tun müssen zuerst . Aber das ist eine ganz andere Diskussion.