如何在 django 函数中使用 <select> 的值？答案

【问题标题】：How to use the value of <select> in with django function?如何在 django 函数中使用 <select> 的值？
【发布时间】：2015-02-22 13:41:36
【问题描述】：

所以我想用 django 在我的 html 中创建一个函数。

我的函数看起来像：

function try() {document.getElementById("demo").inerHTML = '{%for x in xl%}'+
'{%if x.name == document.getElementById("select1").value%}'+
'<button type="button">hello</button>'+
'{%endif%}{%endfor%}'}

相关的html是：

<select id="select1">
<option value = "tiger"></option>
<option value = "bear"></option>
<option value = "eagle"></option>
</select>
<p id="demo"></p>
<script>try();</script>

所以只是为了说清楚： 'xl' 是一个列表，这个列表中的项目有一个名称变量。每次选择的动物是列表中项目的名称时，我希望我的网站在“演示”段落中显示“你好”按钮。

当试图运行它时，它说：“无法解析剩余部分：'("select1").value;'来自'document.getElementById("select1").value;' "

请帮我找出问题所在以及如何解决，谢谢。

【问题讨论】：

什么？你可能想在这里做什么？您似乎以一种非常奇怪的方式混合了 JS 和 Django 模板语法，这种方式永远无法正常工作。
我解释了我正在尝试的内容，并且我可能做错了什么。如果您知道如何正确操作，请提供帮助。
丹尼尔是正确的。无法想象这会奏效。您当然可以在 JavaScript 代码中输出服务器端 Django 变量，但我不知道为什么您不只是使用 Django 表单，然后通过 JavaScript 输出选定的选项。
@Brandon 你能告诉我如何使用你所说的那个表格吗？

标签： javascript python django

【解决方案1】：

为什么不直接使用 Django 表单，然后用 JavaScript 获取选定的选项值？示例代码未经过测试。你的 Django 项目中仍然需要一个应用程序、设置、模板、路由等。

# forms.py
class AnimalForm(forms.Form):
    TIGER = 'Tiger';
    BEAR = 'Bear'
    EAGLE = 'Eagle'
    ANIMAL_CHOICES = (
        (TIGER, TIGER,),
        (BEAR, BEAR,),
        (EAGLE, EAGLE,),
    )

    animal = forms.CharField(max_length=20, choices=ANIMAL_CHOICES,
        default=TIGER)

    def save(self):
        return NotImplementedError
        # implement

# views.py
from django.shortcuts import render
from .forms import AnimalForm


def choose_animal(request):

    form = AnimalForm(request.POST or None)

    if request.method == 'POST' and form.is_valid():
        form.save()
        # do something, like redirect to a success page, etc

    return render(request, 'animal_form.html',
        {'form': form})


#animal_form.html

<form action="." method="post" enctype="application/x-www-form-urlencoded">
    {{ form.animal }}
    <button type="submit">Save</button>
</form>
<p id="animal-selection"></p>

<script>
    // assuming jQuery is already linked for brevity

    (function($) {
        $(function() {
            $('#id_animal').on('change', function() {
                $('#animal-selection').html($(this).val());
            });
        });
    })(jQuery);
</script>

【讨论】：