JavaScript DOM重建后autofocus无法触发focus事件问题

核心原因是HTML的autofocus属性仅在页面首次加载解析DOM阶段生效：

• 首次点击「Löschen」按钮生成交互界面时，页面还处于初始加载后的DOM解析流程里，浏览器识别到带autofocus属性的select元素会自动触发聚焦，绑定在focus事件上的渲染逻辑正常执行，因此第二个select的选项可以正常加载。
• 点击主菜单返回、通过innerHTML = ''清空原有内容后，再次点击按钮创建DOM属于页面加载完成后的动态DOM操作，这时候哪怕新创建的select元素带有autofocus属性，浏览器也不会自动触发聚焦动作，绑定在focus事件上的渲染逻辑自然不会运行，必须手动聚焦第一个select才能触发渲染。

另外你的代码设计本身存在隐患：把第二个select的首次渲染逻辑完全绑定在focus、change这类用户交互事件上，没有主动执行初始化渲染的逻辑，一旦浏览器的自动聚焦行为不符合预期，功能就会直接异常。
顺带提一个你代码里的其他隐患：for (let i = 0; i <= Arrays.length; i = i + 2)这里的循环条件写错了，数组下标从0开始，最大有效下标是Arrays.length - 1，用<=会多循环一次取到undefined值，虽然不是这次问题的主因，但也可能导致逻辑判断异常。

• 最稳妥的方案：不要依赖autofocus的自动行为，在你把第一个select元素插入到DOM之后，主动调用聚焦方法，同时主动执行一次渲染逻辑，示例代码如下：

fieldset_select_array.appendChild(select_select_array);
// 原有事件绑定代码保留
select_select_array.addEventListener('change', array_selected);
select_select_array.addEventListener('change', set_array_name);
select_select_array.addEventListener('focus', array_selected);
select_select_array.addEventListener('focus', set_array_name);

// 新增以下两行，主动触发聚焦和初始化渲染
select_select_array.focus();
set_array_name();

这种方式完全不依赖浏览器对动态元素autofocus的兼容行为，所有浏览器下表现一致。

• 逻辑优化方案：把渲染逻辑和交互事件解耦，不要等事件触发才做第一次渲染。你在创建完第一个select、设置好默认选中项之后，直接根据默认值执行一次第二个select的选项渲染，后续focus、change事件触发时只需要拿最新值重新渲染即可，从根源上避免依赖事件触发初始化的问题。
• 额外代码建议：不要用eval()去获取对应数组，你可以调整Arrays数组的存储结构，直接把数组引用和显示名称成对存储，比如存成[{key: 'obst', name: 'Obst', data: obst}, {key: 'gemüse', name: 'Gemüse', data: gemüse}]，后续需要取对应数组直接读data属性即可，eval存在安全风险，也不利于调试。

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