Django模板script标签内渲染ChoiceField到JS变量报错如何解决？

问题本质 #

你遇到的问题核心原因有两点：

• {{ form.testfield }} 直接输出的是ChoiceField渲染后的完整<select>控件HTML代码，包含换行、双引号等特殊字符，不符合JS字符串的语法规则，会导致字符串提前闭合、断行
• 普通的|escape过滤器是为HTML渲染场景设计的，不会处理JS字符串所需的转义规则，所以无法解决问题

场景1：仅需要获取ChoiceField的当前选中值 #

大部分业务场景下我们不需要把完整的控件HTML传给JS，只需要获取选中的选项值，直接使用字段的value属性即可，无额外转义问题：

<script>
    window.testfield = '{{ form.testfield.value }}'
</script>

如果需要同时获取选中选项的显示文本，可以在视图中提前把选项映射关系传入模板，或者通过form.testfield.field.choices遍历匹配即可。

场景2：确实需要将完整的select控件HTML存入JS变量 #

如果你的业务需要把整个控件的HTML代码作为字符串传入JS，使用Django专门为JS场景设计的escapejs过滤器即可：

<script>
    window.testfield = '{{ form.testfield|escapejs }}'
</script>

escapejs会自动转义所有JS字符串的特殊字符：换行符转译为\n、单双引号转译为对应十六进制编码、斜杠也会做兼容处理，不会破坏JS语法和script标签结构。

更安全的无转义方案 #

如果要完全避免手动处理转义、引号的问题，可以用Django内置的json_script模板标签，它会自动将值转为安全的JSON格式并生成独立的script标签，直接读取即可：

1. 先在模板任意位置写入标签：

{{ form.testfield|json_script:"testfield-data" }}

2. 在JS代码中读取对应内容：

<script>
    const testfieldHtml = JSON.parse(document.getElementById('testfield-data').textContent)
    window.testfield = testfieldHtml
</script>

该方案安全性最高，完全规避转义错误和XSS风险。

补充注意 #

你提供的forms.py代码存在语法错误，表单定义需要用class关键字，正确写法为：

from django import forms
class TestForm(forms.Form):
    testfield = forms.ChoiceField(initial="a", 
                                  choices=[
                                        ("a", "option a"),
                                        ("b", "option b"),
                                        ("c", "option c"),
                                        ("d", "option d")
                                  ])

（另外你原代码中initial值设置为increase_rate，但choices里没有对应value，会导致默认选中失效，这里修正为匹配的a）

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