DOMに追加された要素をすぐにフォーカスする方法

Question

ボタンをクリックすると表示されるドロップダウンリストがあります。このドロップダウンリストは、ボタンがクリックされるまでDOMで使用できません。 DOMに追加されるとすぐに、このドロップダウンリストの最初のリスト項目にどのようにフォーカスを当てることができますか。

ありがとうございます。 EXのために

Answer 1

を使用してそれを行うことができ、それを集中DOM上のドロップダウンボタンを作成するのに役立ちます。もちろん、あなたはそれを改善しなければなりません。

createDropdown = function(optsArray) { 
 
    let dd = document.createElement("select"); 
 
    dd.setAttribute("id", "foo"); 
 
    for(var i =0; i<optsArray.length; i++) { 
 
    let opt = document.createElement("option"); 
 
    opt.setAttribute("value", i); 
 
    let optText = document.createTextNode(optsArray[i]); 
 
    opt.appendChild(optText); 
 
    dd.appendChild(opt); 
 
} 
 
    let cnt = document.getElementById("dropdown-container"); 
 
    cnt.innerHTML=""; 
 
    cnt.appendChild(dd); 
 
    dd.focus(); 
 
} 
 

 
document.querySelector("button").addEventListener("click", function() { 
 
    let opts = ["Marx", "Engels", "Lenin", "Gramsci", "Althusser", "Zizek"]; 
 
    createDropdown(opts); 
 
})

#dropdown-container{ 
 
margin-top: 700px; 
 
}

<button>Click me to load dropdown and focus it</button> 
 

 
<div id="dropdown-container"></div>

Answer 2

：あなたのドロップダウン要素のidが「selectstate」である場合は、getElementByIdをスニペット以下

<select id="state" name="state"> 
<option value="AB">AB</option> 
<option value="AC">AC</option> 
</select> 


window.onload = function() { 

    document.getElementById("state").focus(); 
};