ServiceNow UI页面中动态生成带预选值的下拉框问题

问题场景 #

你需要在ServiceNow UI页面的下拉框中，根据记录值动态选中对应选项。当前尝试的方案是通过<g:evaluate>脚本生成包含<option>标签的数组，匹配指定language值的选项添加selected属性，再用<j2:forEach>遍历输出。但目前数组中的HTML文本无法正确解析，预选功能完全失效。

核心排查点 #

1. HTML内容被转义：ServiceNow的Jinja2（j2）模板默认会转义HTML内容，导致你生成的<option>标签被当成普通文本输出，而非解析为下拉框的选项元素。
2. 选项生成逻辑错误：检查<g:evaluate>中生成的<option>字符串是否格式正确，比如selected属性的拼写、引号是否闭合、value值与目标值是否完全匹配（大小写敏感）。
3. 下拉框结构问题：确保<j2:forEach>的遍历代码完全包裹在<select>标签内部，没有嵌套错误。

解决代码示例 #

1. 正确生成选项数组（<g:evaluate>部分） #

<g:evaluate var="j2_options" object="true">
    // 测试用硬编码，后续替换为URL参数获取：比如 gs.action.getGlideURI().getParameter('sysparm_language')
    var targetLanguage = 'en';
    var options = [];
    
    // 模拟从字典/表中获取的语言选项列表，实际可替换为GlideRecord查询
    var languageList = [
        {value: 'en', label: 'English'},
        {value: 'fr', label: 'French'},
        {value: 'es', label: 'Spanish'}
    ];
    
    for (var i = 0; i < languageList.length; i++) {
        var lang = languageList[i];
        var selectedAttr = (lang.value === targetLanguage) ? 'selected' : '';
        // 用gs.htmlEscape处理特殊字符，避免HTML结构破坏
        var safeValue = gs.htmlEscape(lang.value);
        var safeLabel = gs.htmlEscape(lang.label);
        options.push('<option value="' + safeValue + '" ' + selectedAttr + '>' + safeLabel + '</option>');
    }
    
    options;
</g:evaluate>

2. 遍历输出时禁用HTML转义 #

在<j2:forEach>中使用safe过滤器，让ServiceNow直接解析HTML内容：

<select name="user_language" id="user_language">
    <j2:forEach items="${j2_options}" var="option">
        ${option | safe}
    </j2:forEach>
</select>

额外验证步骤 #

• 后台日志验证：在<g:evaluate>中添加gs.info('Generated options: ' + options)，查看系统日志确认生成的<option>字符串格式正确。
• 前端DOM检查：页面加载后，查看浏览器开发者工具的Elements面板，确认<select>内部是否渲染出正确的<option>标签，且目标选项带有selected属性。

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