在 Django 表单中动态显示和隐藏字段答案

【问题标题】：Show and hide dynamically fields in Django form在 Django 表单中动态显示和隐藏字段
【发布时间】：2013-02-14 17:02:39
【问题描述】：

我在 Django 中有一个表单：

views.py：

class SearchForm(forms.Form):
    type = forms.ChoiceField(choices = ...)
    list1 = forms.ModelMultipleChoiceField(...)
    list2 = forms.ModelMultipleChoiceField(...)

home.htm:

<td valign='top'>{{ form.type }}</td>
<td valign='top'>{{ form.list1 }}</td>
<td valign='top'>{{ form.list2 }}</td>
<td valign='top'><input type="submit" value="Find" /></td>

如果类型为 1，我希望显示 list1 元素，如果类型为 2，则隐藏 list2，反之亦然。我希望在不重新加载页面或与服务器进行任何交互的情况下动态隐藏和显示它们。

我相信 Javascript 在这里可能有用，但我不知道。

【问题讨论】：

您打算在是否与服务器进行任何进一步交互的情况下使其工作？如果你不想让服务器参与进来，Javascript 确实是唯一的出路。我很乐意为这两种情况举一个例子，让我们知道您喜欢哪种方法。
不使用，使用 jscript。

标签： javascript django forms

【解决方案1】：

这是对 Andrew 的 Javascript 解决方案的改编，以您通常期望的方式使用 Django 表单。

Django/Python 中的表单：

class SearchForm(forms.Form):
    type = forms.ChoiceField(choices = ((1, 'One'), (2, 'Two')))

    # Use any form fields you need, CharField for simplicity reasons
    list1 = forms.CharField()
    list2 = forms.CharField()

模板，假设SearchForm 的实例被传递到名为“form”的模板上下文：

<script>
function Hide() {
    if(document.getElementById('id_type').options[document.getElementById('id_type').selectedIndex].value == "1") {
         document.getElementById('id_list1').style.display = 'none';
         document.getElementById('id_list2').style.display = '';
    } else {
         document.getElementById('id_list1').style.display = '';
         document.getElementById('id_list2').style.display = 'none';
    }
}

window.onload = function() {
    document.getElementById('id_type').onchange = Hide;
};
</script>

<div>
    {{ form.type.label_tag }}{{ form.type }}
</div>
<div>
    {{ form.list1.label_tag }}{{ form.list1 }}
</div>
<div>
    {{ form.list2.label_tag }}{{ form.list2 }}
</div>

【讨论】：

我看不到它也会隐藏标签。
@ismailsunni 如果你 jquery 可以隐藏标签： $('#id_list1').parent().hide();在纯 javascript 中可以使用 .parentElement

【解决方案2】：

试试这个...

<script>function Hide()
{
    if(document.getElementById('mainselect').options[document.getElementById('mainselect').selectedIndex].value == "1")
    {
         document.getElementById('a').style.display = 'none';
         document.getElementById('b').style.display = '';
    }else
    {
         document.getElementById('a').style.display = '';
         document.getElementById('b').style.display = 'none'
    }
}
</script>
<td valign='top'><select id="mainselect" onchange="Hide()"><option value="1">1</option><option value="2">2</option></select></td>
<td valign='top' id='a'>{{ form.list1 }}</td>
<td valign='top' id='b'>{{ form.list2 }}</td>
<td valign='top'><input type="submit" value="Find" /></td>

【讨论】：

废话 - 我有 ( 而不是 {。再试一次。
这意味着服务器或更准确地说是模板上下文知道用户选择的类型。
form.type 是模板系统的占位符。客户端将看不到 form.type。从他的代码的外观来看，他想根据服务器值 form.type 隐藏。
不，我想如果用户选择类型1，则显示list1，如果他切换到类型2，则显示list2，依此类推，无需与服务器进行任何交互。
我已根据用户对下拉列表的选择将答案编辑为隐藏。