下拉菜单设置默认值后仍触发必填校验问题求助

核心原因 #

禁用的表单元素不会被表单校验逻辑识别，也不会被包含在提交的表单数据中——这就是你明明看到选中了值，系统还提示必填的根本问题。多数校验逻辑只会检查可交互的表单元素，直接忽略了禁用元素的存在。

具体解决方法 #

方法1：用readonly替代disabled（适配支持的场景） #

部分UI框架的下拉框支持readonly属性，设置后用户无法修改，但元素仍会被校验逻辑识别，也能正常提交数据：

function brandPickerHn() {
    $("#Search__32Page__32Layout__46dropdownlist5 option[value='Value2']").prop("selected", true);
    // 替换disabled为readonly
    $("#Search__32Page__32Layout__46dropdownlist5").prop("readonly", true);
}

如果原生select不支持readonly，可以用下面的方法。

方法2：隐藏真实下拉框，显示只读模拟元素 #

把真实下拉框隐藏（保持启用状态，让校验和提交能读到值），同时在页面上展示一个看起来像禁用状态的元素显示选中值：

function brandPickerHn() {
    const $select = $("#Search__32Page__32Layout__46dropdownlist5");
    // 设置默认选中并同步状态
    $select.find("option[value='Value2']").prop("selected", true);
    $select.trigger("change");
    
    // 创建模拟禁用的展示元素
    const $fakeSelect = $("<div>").addClass("fake-disabled-select")
                                  .text($select.find("option:selected").text())
                                  .css({
                                      padding: "6px 12px",
                                      border: "1px solid #ccc",
                                      borderRadius: "4px",
                                      backgroundColor: "#eee",
                                      cursor: "not-allowed"
                                  });
    // 替换显示
    $select.hide().after($fakeSelect);
}

方法3：手动标记校验通过 #

如果系统有自定义校验规则，可以直接给下拉框添加校验通过的标记，或者强制触发校验通过：

function brandPickerHn() {
    const $select = $("#Search__32Page__32Layout__46dropdownlist5");
    $select.find("option[value='Value2']").prop("selected", true);
    $select.attr("disabled", true);
    
    // 假设校验逻辑识别data-valid标记
    $select.attr("data-valid", "true");
    
    // 如果用jQuery Validate插件，手动标记有效
    if ($.validator) {
        $select.valid();
    }
}

方法4：用隐藏字段同步提交值 #

禁用元素不会被提交，所以可以把选中值同步到一个隐藏input里，让表单提交这个隐藏字段的值：

function brandPickerHn() {
    const $select = $("#Search__32Page__32Layout__46dropdownlist5");
    $select.find("option[value='Value2']").prop("selected", true);
    $select.attr("disabled", true);
    
    // 创建和下拉框同名的隐藏输入框
    const $hiddenInput = $("<input>").attr({
        type: "hidden",
        name: $select.attr("name"),
        value: "Value2"
    });
    $select.after($hiddenInput);
}

关键提醒 #

• 操作表单元素状态（比如selected、disabled）优先用prop()，而非attr()，prop()直接操作DOM元素属性，更准确。
• 一定要触发change事件，确保框架的表单内部状态（比如Vue/React绑定的数据）同步更新。

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