Javascript中的Django模板变量答案

【问题标题】：Django template var in JavascriptJavascript中的Django模板变量
【发布时间】：2021-06-14 17:16:00
【问题描述】：

让我们看一个字典：

mydict = {
  'color': "blue",
  'brand': "Ford",
  'year': 1969
}

我们将此字典传递给我们的模板，然后，在模板中，我们有一个选择列表，其中包含根据我们的字典键（颜色、品牌、年份）的选项。

现在，我想更改渲染模板中有关所选选项的一些文本。

所以我们有一些 Jquery 正在获取所选选项的值，如下所示：

$('#myselect').change(function() {
        var selected = $( "#myselect option:selected" ).text();
    });

现在我们已经选择了文本，我想用它作为键来显示我们字典中的值。像这样的

$('#myselect').change(function() {
            var selected = $( "#myselect option:selected" ).text();
            $('#mytext').text('{{ mydict.selected }}');
        });

但我想像这样混合 Django var 和 JS var 是行不通的...... 知道我该怎么做吗？

【问题讨论】：

您可以使用 html5 数据集属性并通过 JavaScript/jQuery 获取值。如果你问我，那是最干净的方法。
最好试试这样的stackoverflow.com/a/25538871/1638231

标签： javascript django django-templates

【解决方案1】：

根据 Martins 的评论，这是我所做的：

在模板中：

<select id="myselect">
  <option value="color">color</option>
  <option value="brand" selected="">brand</option>
  <option value="year">year</option>
</select>

{% for key,value in mydict.items %}
  <small id="{{key}}" class="messages" style="display:none;">
    {{ value }}
  </small>
{% endfor %}

然后是一些 JS：

$('#myselect').change(function() {
        var selected = $( "#myselect option:selected" ).text();
        $('.messages').hide();
        $('#' + selected).show();

    });

【讨论】：