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

Question

I have a form in 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>

如果type等于1，我希望显示list1元素并隐藏list2元素，反之亦然。 我希望它们能够动态地隐藏和显示，而不需要重新加载页面或与服务器进行任何交互。

我相信JavaScript可能在这里很有用，但我不了解它。

- Nikolay Kovalenko

---

你打算让这个工作与服务器有无进一步交互？如果你不想让服务器参与，那么Javascript确实是唯一的选择。我很乐意为两种情况提供示例，只要告诉我们你喜欢哪种方法即可。 - Lukas Bünger

不使用jscript。 - Nikolay Kovalenko

Answer 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()

假设一个名为 "form" 的 SearchForm 实例已被传递到模板上下文中：

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

- Lukas Bünger

---

我看不到它还会隐藏标签。 - ismailsunni

@ismailsunni 如果你使用 jQuery，可以使用以下代码隐藏标签：$('#id_list1').parent().hide(); 在纯 JavaScript 中，可以使用 .parentElement 来实现相同的效果。 - Gere

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

- Andrew Kloos

---

糟糕 - 我写成了括号 ( 而不是 {。再试一次。 - Andrew Kloos

这意味着服务器或更准确地说模板上下文知道用户所选择的类型。 - Lukas Bünger

不，我希望如果用户选择类型1，则显示列表1，如果他切换到类型2，则显示列表2等，而不需要与服务器进行任何交互。 - Nikolay Kovalenko

我已经编辑了我的答案，根据用户在下拉列表中的选择进行隐藏。 - Andrew Kloos

明白了，我需要将“名称”属性添加到它里面。现在它可以工作了！非常感谢你们。 - Nikolay Kovalenko