Django-select2通过JS点击链接设值异常，寻求技术解决

问题根源分析 #

• 未阻止链接默认跳转行为：点击#topicSuggestion链接时，浏览器会执行默认跳转逻辑，导致后续设置Select2的代码未完全执行。
• 模板变量渲染无容错：若object.suggestion.topic不存在，{{ object.suggestion.topic.id }}会渲染为空值，导致设置的value无效；即使对象存在，直接赋值未考虑Select2选项是否存在（尤其是远程加载数据的场景）。
• Select2值设置逻辑不完整：仅用val().trigger('change')在目标选项不存在时，会触发下拉框清空的异常。

修复后的代码 #

<script type="text/javascript">
    $( document ).ready(function() {
        $('#topicSuggestion').on('click',function (e) {
            // 阻止链接默认跳转，确保脚本完整执行
            e.preventDefault();
            
            // 处理模板变量为空的情况，避免无效操作
            var topicId = {{ object.suggestion.topic.id|default:"null" }};
            if (topicId === null) return;
            
            var $select = $('#id_topic');
            var topicName = '{{ object.suggestion.topic.name|escapejs }}';
            
            // 检查目标选项是否存在，不存在则手动添加（适配远程加载场景）
            if (!$select.find('option[value="' + topicId + '"]').length) {
                $select.append(new Option(topicName, topicId, true, true));
            }
            
            // 设置值并触发Select2的change事件
            $select.val(topicId).trigger('change');
        });    
    });
</script>

关键修复点说明 #

• 阻止默认跳转：添加e.preventDefault()，避免点击链接时页面跳转，确保设置Select2的代码执行完毕。
• 容错处理：用|default:"null"过滤模板变量，当推荐话题不存在时直接终止逻辑，避免无效赋值。
• 选项存在性检查：针对远程加载数据的Select2，初始DOM中没有对应选项，必须先手动添加选项再设置值，否则会出现下拉框清空问题。
• XSS防护：用|escapejs过滤话题名称，避免字符串中的引号或特殊字符破坏JS代码结构。

内容的提问来源于stack exchange，提问作者S.D.