在渲染的html页面上使用Javascript中的Django渲染列表

Using Django rendered lists in Javascript on the rendered html page

本文关键字：Javascript 中的 列表 Django html      更新时间：2023-09-26

我正在制作一个django应用程序，其中我制作了一个自定义视图，该视图将元素的查询集传递到渲染的html页面。

在html页面中，我想有一个选项，从选择列表中选择一个单词，如果选择的单词匹配列表中的任何元素，我从视图中得到，我应该需要显示它。

我尝试使用Java脚本读取这些元素到数组中，然后在选择框中更改使用该数组。但它没有像我要求的那样工作。

这是我到目前为止所做的。

视图:

from .models import words as m
def test(request):
  words = m.objects.all()
context = Context({
    'words': words, 
})
return render(request, 'newpage.html',context)

newpage.html: 

<select id="sel" onChange="func();">
<option  value="" selected="selected">--none--</option>
<option value="word1">word1</option>
....
<option value="wordn">wordn</option>
</select>
<script>
function func()
{
 var e = document.getElementById("sel");
 var str = e.options[e.selectedIndex].value;
 '{% for each in words %}'
 var a="{{ each.word }}";
 if(str===a)
    {
    console.log('{{each.word }}')//or passing it to a div in html
     }
{% endfor %}
 }
</script>

我需要的是如果选定的元素是"word1"，如果查询集"words"有"word1"在它，它应该显示在任何div页面中的单词有谁能帮我理解在html/js中使用这个queryset对象的正确方法吗?

像下面这样修复你的脚本，这应该为你工作:

<script>
function func() {
    var e = document.getElementById("sel");
    var str = e.options[e.selectedIndex].value;
    "{% for each in words %}"
        var a = "{{ each.word }}";
        if(str === a) {
            console.log("{{ each.word }}")
        }
    "{% endfor %}"
}
</script>

试试这样:

<script>
    var words = [
    {% for word in words %}
        "{{ word }}",
    {% endfor %}
    ];
    function func() {
        var e = document.getElementById("sel");
        var str = e.options[e.selectedIndex].value;
        for (var word = 0; word < words.length; word++) {
            if (words[word] === str) {
                console.log(words[word]);
            }
        }
    }
</script>
相关文章：