javascript 在 Django 表单中动态显示和隐藏字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15136657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show and hide dynamically fields in Django form
提问by Nikolay Kovalenko
I have a form in Django:
我在 Django 中有一个表单：
views.py:
视图.py：
class SearchForm(forms.Form):
type = forms.ChoiceField(choices = ...)
list1 = forms.ModelMultipleChoiceField(...)
list2 = forms.ModelMultipleChoiceField(...)
home.htm:
主页.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>
I want the list1 element to be shown and the list2 to be hide if type is 1 and vice versa in case type is 2. I want them to be hide and shown dynamically without reloading the page or any interaction with the server.
我希望显示 list1 元素，如果 type 为 1，则隐藏 list2，如果 type 为 2，则反之亦然。我希望它们被隐藏和动态显示，而无需重新加载页面或与服务器进行任何交互。
I believe Javascript could be useful here, but I don't know it.
我相信 Javascript 在这里很有用，但我不知道。
采纳答案by Andrew Kloos
Try this...
试试这个...
<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>
回答by Lukas Bünger
This is an adaption of Andrew's Javascript solution, using Django forms the way you'd usually expect.
这是对 Andrew 的 Javascript 解决方案的改编，以您通常期望的方式使用 Django 表单。
The form in Django / Python:
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()
The template, assuming an instance of SearchFormgot passed to the template context with the name 'form':
模板，假设一个实例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>
