クラスのドロップダウンオプションを選択するJavascript

Question

私はそれをクリックすると、ページ上のすべての同じ要素ボタンをクリックし、機能が完了した後、すべての'Pはドロップダウンしている。私はページ上に複数の 'pf'クラスを持っており、すべてをPに設定する必要があります。最初の関数は動作していますが、2番目の関数に到達すると、option.lengthが定義されていないことを示すエラーがあります。私の質問は、どのようにクラス内のすべてのオプション数を取得するのですか？

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

これはただの選択ドロップダウンを返さない - it returns an HTMLCollection（すなわち、要素のグループ）は、そのクラス名を一致任意の要素を持つ：

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

はここにあなたの問題です。プレゼントが1つしかない場合でも、コレクションとして戻ってきます。しかし、あなたのsetSelectedValue関数はコレクションを期待していません。ただ1つの要素だけです。そのため、undefinedエラーが発生します。

あなたがページ上の他の場所でやっていることに応じて、これを扱うことができるいくつかの方法があります。

• あなたは、そのクラスで最初の要素を返すためにdocument.querySelector('.pf')を使用することができます - 場合は、これを行いますページには.pfの1つだけを持つか、その1つを管理したいだけです。
• また、document.getElementsByClassName('pf')[0]を使用して同じことを達成できます。
• それともidを選択し、一方で、あなたはすべての作業がこのよう...あなたが最初のいくつかのリファクタリングを行う必要があるでしょう、複数の.pfの要素を持っていることを計画、場合document.querySelector('#pf')またはdocument.getElementById('pf')
• を使用して与えることができます。しかしそれは他の議論の全体です。