Question

我正在开发一个django应用程序，在那里我创建了一个自定义视图，将一个元素的查询集传递给渲染的html页面。

在html页面中，我希望有一个选项可以从选择列表中选择一个单词。如果所选单词与我从视图中获得的列表中的任何元素匹配，我应该显示它。

我尝试使用Java脚本将这些元素读入数组，然后在选择框中的chnage上使用该数组。但它并没有按照我的要求工作。

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

查看：

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>

我需要的是如果所选元素是＆＃34; word1＆＃34;如果查询集＆＃34;单词＆＃34;有＆＃34; word1＆＃34;在它，它应该在任何div的页面中显示单词任何人都可以帮助我理解在html / js中使用这个queryset对象的正确方法。

Answer 1

修改您的脚本，如下所示，这应该适合您：

<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>

Answer 2

尝试这样的事情：

<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>

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

2 个答案: