如何在動態創建的 select 上將焦點移至下一個元素

Question

html 表單包含輸入元素。

Javascript and jquery code are used to create select element at runtime and inserting it after element elem and assigning Bootstrap 5 class to it:

let selectArray = ["Intv Scheduled", "Selected", "Rejected", "On Hold"];
let id = 'Customer';

$('#' + id).remove();

var selectList = document.createElement("select");
selectList.id = selectList.name = id;
selectList.className = "form-select";

elem.after(selectList);
for (var i = 0; i < selectArray.length; i++) {
    var option = document.createElement("option");
    option.value = option.text = selectArray[i];
    selectList.appendChild(option);
}  
selectList.focus();

用戶使用回車鍵選擇項目。 按下回車后 select 元素仍然是焦點。

如果按下輸入，如何將焦點移動到表單中的下一個元素？
如何用普通的 JavaScript 替換$('#' + id).remove()以便可以刪除 jQuery 依賴項？

Answer 1

有兩種純 JavaScript 方法用於替換 jQuery 中的$(...).remove() function。

解決方案一 - .remove() function。

let id = "";
// Find the element then remove it
document.getElementById(id).remove();

參考：

• https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

解決方案二 - 找到父節點，然后使用.removeChild()方法。

let id = "";
// Find the element mentioned
let element = document.getElementById(id);
// Find the elements parent node
let parent = element.parentNode;
// Remove the element from the parent
parent.removeChild(element);

參考：

• https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

Answer 2

很難猜出你在問什么。

SO上已經有多個建議和答案。

Enter 按鍵的行為類似於 Javascript 中的 Tab

 document.addEventListener('keydown', function (e) { if (event.keyCode === 13 && event.target.nodeName == 'SELECT') { var form = event.target.closest('form'); var index = Array.prototype.indexOf.call(form, event.target); form.elements[index + 1].focus(); return false; } });

 <form> <div id = "Customer">Customer</div> <select> <option value = "">Test</option> <option value = "">Test</option> </select> <input type = "text"> <select> <option value = "">Test</option> <option value = "">Test</option> </select> <select> <option value = "">Test</option> <option value = "">Test</option> </select> <input type = "text"> </form>