JavaScript下拉框onchange变量通过setAttribute传递到外部函数问题

• 事件绑定选择器错误：使用$('#role')绑定change事件，但动态生成的select元素未设置id="role"，选择器无法匹配目标元素，事件绑定完全失效。
• DOM挂载逻辑冗余：创建select后先挂载到document.body，后续又移动到#role+id容器，属于无效操作，可能引发DOM节点异常。
• 元素属性误用：select元素不存在type属性，该属性仅适用于input元素，强行设置不会生效；select的选中状态由子option的selected属性控制，不需要通过setAttribute给select本身设置value属性，select的value会自动同步当前选中项的value。
• 初始选中逻辑缺失：传入的初始role参数未被使用，生成选项时没有默认选中用户原有角色。
• change事件逻辑冗余：select的value会自动跟随选中项变化，不需要手动修改option的value属性，也不需要手动给select赋值。

function editProcess(row, id, name, username, email, role) {
    // 原有姓名输入框逻辑保持不变
    $( "#name"+id ).empty();
    const nameInput = document.createElement("input");
    nameInput.setAttribute("type", "text");
    nameInput.setAttribute("class", "form-control");
    nameInput.setAttribute("value", name);
    nameInput.setAttribute("required", "true");
    nameInput.setAttribute("style", "padding:0");
    nameInput.setAttribute("name","name");
    nameInput.addEventListener('input', clearPopUps);
    $( "#name"+id ).append(nameInput);

    // 修正后的角色下拉选择框逻辑
    const roleArray = ["Admin","Officer","Manager"];
    const roleContainer = $( "#role"+id );
    roleContainer.empty();

    // 创建select元素
    const roleSelect = document.createElement("select");
    roleSelect.setAttribute("class", "form-control");
    roleSelect.setAttribute("required", "true");
    roleSelect.setAttribute("style", "padding:0");
    roleSelect.setAttribute("name","role");
    roleSelect.addEventListener('input', clearPopUps);

    // 生成选项并设置默认选中值
    for (let i = 0; i < roleArray.length; i++) {
        const option = document.createElement("option");
        option.value = roleArray[i];
        option.text = roleArray[i];
        // 默认匹配传入的原有角色
        if (roleArray[i] === role) {
            option.setAttribute('selected', 'selected');
        }
        roleSelect.appendChild(option);
    }

    // 如有值变化时的额外业务逻辑，可直接绑定到当前select元素
    roleSelect.addEventListener('change', function() {
        console.log('当前选中角色：', this.value);
        // 此处可添加其他自定义逻辑
    });

    // 挂载到对应容器
    roleContainer.append(roleSelect);
}

• 动态生成的select元素直接绑定事件，不需要依赖全局选择器，避免匹配错误。
• 删除了冗余的DOM挂载操作，减少不必要的节点重排。
• 补充了初始角色选中逻辑，符合编辑场景的使用需求。
• 移除了所有无效属性设置，避免浏览器解析异常。
• 表单提交时可直接获取select元素的value，不需要额外处理，和原有自由文本框的取值逻辑完全兼容，不需要修改后续AJAX调用代码。

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