如何使用JavaScript修改select标签的required属性为disabled或hidden

修正后完整JS代码 #

function myFunction(e) {
    // 获取第一个下拉框当前选中的option节点
    const selectedOption = e.target.selectedOptions[0];
    // 读取option上自定义属性a的取值
    const controlType = selectedOption.getAttribute('a');
    const secondSelect = document.getElementById('bank1');

    // 保留原有的修改name属性逻辑
    secondSelect.name = controlType;

    // 动态控制required属性和显示状态
    if (controlType === 'required') {
        secondSelect.required = true;
        secondSelect.hidden = false;
    } else if (controlType === 'hidden') {
        secondSelect.required = false;
        secondSelect.hidden = true;
        // 如果需要隐藏时不提交该字段可取消下面这行的注释
        // secondSelect.disabled = true;
    }
}

核心改动说明 #

• 修正了自定义属性读取逻辑：原有代码直接取e.target.a拿到的是第一个select元素的属性，并不是选中option的a属性，调整为通过selectedOptions[0]获取选中项后再读取自定义属性，兼容性更好
• 新增属性切换逻辑：根据a属性的取值动态切换第二个下拉框的required布尔属性，同时通过原生hidden属性控制元素的显示隐藏，符合你要将required状态切换为隐藏的需求
• 如果你需要隐藏时该字段不跟随表单提交，可以在hidden分支中加上secondSelect.disabled = true，disabled状态的表单元素不会被默认提交。

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