动态创建Select元素后按回车键切换焦点至下一个表单元素及移除jQuery依赖的实现方法

问题2：用原生JavaScript替换jQuery的移除语句 #

这个很简单，直接用原生DOM API就能搞定，先通过getElementById找到目标元素，确认存在后调用remove()方法即可，避免元素不存在时抛出错误：

const existingSelect = document.getElementById(id);
if (existingSelect) {
  existingSelect.remove();
}

这行代码完全替代了$('#' + id).remove()，彻底移除了对jQuery的依赖。

问题1：按下回车键后移动焦点到下一个表单元素 #

我们需要给生成的select元素添加keydown事件监听，捕获回车键操作，然后手动定位到表单里的下一个可聚焦元素并设置焦点：

selectList.addEventListener('keydown', function(e) {
  // 判断是否按下回车键
  if (e.key === 'Enter') {
    // 阻止默认行为（避免回车重复选中当前选项）
    e.preventDefault();
    
    // 获取当前select所在的表单
    const form = this.form;
    if (!form) return; // 如果元素不在表单内，直接终止逻辑
    
    // 将表单元素转为数组，方便遍历
    const formElements = Array.from(form.elements);
    // 找到当前select在表单元素中的位置
    const currentIndex = formElements.indexOf(this);
    
    // 从下一个元素开始寻找可聚焦的有效元素
    for (let i = currentIndex + 1; i < formElements.length; i++) {
      const nextElem = formElements[i];
      // 过滤掉隐藏元素和不可聚焦的元素（tabIndex=-1）
      if (nextElem.offsetParent !== null && nextElem.tabIndex !== -1) {
        nextElem.focus();
        break;
      }
    }
  }
});

整合后的完整代码 #

把两个修复点整合到你的原代码中，最终可直接使用的代码如下：

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

// 替换jQuery的移除语句（问题2修复）
const existingSelect = document.getElementById(id);
if (existingSelect) {
  existingSelect.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);
}

// 添加回车焦点切换逻辑（问题1修复）
selectList.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    const form = this.form;
    if (!form) return;
    
    const formElements = Array.from(form.elements);
    const currentIndex = formElements.indexOf(this);
    
    for (let i = currentIndex + 1; i < formElements.length; i++) {
      const nextElem = formElements[i];
      if (nextElem.offsetParent !== null && nextElem.tabIndex !== -1) {
        nextElem.focus();
        break;
      }
    }
  }
});

selectList.focus();

补充说明 #

• 焦点切换逻辑做了兼容处理：只有当select在表单内时才会执行后续操作，同时自动过滤隐藏和不可聚焦的元素，确保逻辑健壮性。
• 使用e.key === 'Enter'而非旧的keyCode，更符合现代浏览器标准，兼容性也更好。

内容的提问来源于stack exchange，提问作者Andrus