联动Select赋值后表单无法提交，如何实现非手动选择的表单验证？

我有一个包含两个下拉选择框（Select）的表单，当用户选择Select B（ID为#ville_livraison）的选项时，通过以下脚本设置Select A（ID为#code_postal_livraison）的特定值：

var $ = jQuery;
 $(document).ready(function () {
     
    $('#ville_livraison').change(function(){
    
    $('#ville_livraison option[value*="74890"]').addClass('cp-74890');
         
    if ($('#ville_livraison option:selected').hasClass('cp-74890')) {
        $('#code_postal_livraison').val("74890");
    }
    
    })
    
    $('#ville_livraison').trigger('change');
});

问题在于，通过这种方式设置值后表单无法提交，仿佛Select A未被选中。请问如何实现表单验证，即使用户未手动选择Select A的选项？

问题出在仅用.val()设置值时，部分表单验证机制（尤其是原生表单验证或框架自带验证）不会识别这个非手动操作——因为既没触发change事件，也未明确标记对应选项为选中状态（如果Select A存在该值的选项）。

可以按以下方式修改：

• 提前给Select B的目标选项添加类，避免每次触发change时重复执行添加操作
• 设置Select A的值时，先将对应选项设为选中状态，再触发change事件，让验证机制感知到值已更新
• 若使用第三方验证插件，需额外触发验证更新

修改后的完整代码：

var $ = jQuery;
$(document).ready(function () {
    // 初始化时就给目标选项添加类
    $('#ville_livraison option[value*="74890"]').addClass('cp-74890');

    $('#ville_livraison').change(function(){
        if ($(this).find('option:selected').hasClass('cp-74890')) {
            var $cpSelect = $('#code_postal_livraison');
            // 选中对应选项并设置值
            $cpSelect.find('option[value="74890"]').prop('selected', true);
            // 触发change事件通知验证机制
            $cpSelect.val("74890").trigger('change');
        }
    });

    $('#ville_livraison').trigger('change');
});

如果表单使用了jQuery Validate这类第三方验证插件，还需要手动触发验证：

// 强制触发Select A的验证
$('#code_postal_livraison').valid();

这样修改后，表单验证就能识别到Select A的值已被正确设置，不会再阻止表单提交。

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