如何将Select2选中值复制到隐藏字段 jQuery实现不生效问题

问题根源 #

你写的jQuery自动同步逻辑失效，是几个低级错误叠加导致的，和Select2、jQuery本身无关：

• 选择器语法错误：{id:inputHidden1}是XPages服务端解析的占位符，只有写在XPage组件的<xp:this.script>块内才会被替换为真实客户端ID，写在独立<script>标签中不会被解析，根本选不到目标元素。
• 硬编码ID选择器不可靠：你写的#view:_id1:inputHidden1是XPages动态生成的客户端ID，只要页面嵌套容器、自定义控件结构变动，前缀就会变化；且jQuery默认将冒号识别为特殊选择器符号，直接写带冒号的ID会直接报语法错误。
• 执行顺序错误：你拿到Select2值后先触发了按钮的部分刷新提交，此时隐藏字段还未被赋值，请求发送的是旧值，后续赋值操作赶不上本次提交。
• 无效方法调用：你最后一行对隐藏字段调用.select2('val')完全错误，隐藏字段是普通input元素，不是Select2组件，执行这行直接抛JS错误，会中断后续逻辑。

正确实现代码 #

直接用XPages原生客户端API拿元素，完全避开选择器坑，逻辑和你原本正常运行的按钮CSJS保持一致即可：

<script>
// 初始化Select2组件
x$("#{id:vehicle}").select2();
// 绑定选中值变更事件
$(document).on("change", "#{id:vehicle}", function(){
    // 获取当前选中值
    var selectedValue = x$("#{id:vehicle}").select2("val");
    // 直接通过XSP原生API获取隐藏字段DOM，不需要拼jQuery选择器
    var hiddenField = XSP.getElementById("#{id:inputHidden1}");
    // 赋值操作必须在触发提交前完成
    hiddenField.value = selectedValue;
    // 赋值完成后再触发按钮的部分刷新
    x$("#{id:button12}").trigger("click");
});
</script>

兼容外部JS文件的写法 #

如果你的逻辑要写在独立外部JS文件中，无法使用#{id:xxx}服务端占位符，就给对应组件加固定CSS类名，用类选择器定位，彻底绕开XPages动态ID的问题：

• 给Select2绑定的下拉框添加class="com-vehicle-select"
• 给目标隐藏字段添加class="com-sync-hidden"
• 给触发刷新的按钮添加class="com-refresh-btn"

对应JS逻辑如下：

$(function(){
    // 初始化Select2
    $(".com-vehicle-select").select2();
    // 绑定变更事件
    $(document).on("change", ".com-vehicle-select", function(){
        var val = $(this).select2("val");
        // 先给隐藏字段赋值
        $(".com-sync-hidden").val(val);
        // 再触发刷新提交
        $(".com-refresh-btn").trigger("click");
    });
});

注意事项 #

• 不要硬编码XPages生成的带冒号的动态ID，哪怕做转义（$('#view\\:_id1\\:inputHidden1')）也非常不推荐，页面结构稍微调整就会失效。
• 所有涉及提交、部分刷新的操作，必须确保表单字段赋值完成后再触发，否则后端SSJS拿到的永远是旧值。

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