如何根据 Django 下拉菜单中的选择显示和隐藏表单字段

Posted 2023-02-24

【中文标题】如何根据 Django 下拉菜单中的选择显示和隐藏表单字段

【英文标题】：How to Show and hide form fields based on a selection from a dropdown menu in Django

【发布时间】：2012-04-26 00:14:01

【问题描述】：

我有一个关于如何根据在 Django 中对其父字段的选择有条件地隐藏或显示字段的问题。

**更新：我可以通过在 javascript 中定义一个函数来实现这个特性，这个函数已经用一些简单的 html 代码进行了测试。但是，由于我的输入表是由 Django 创建的，谁能告诉我如何在 Django 'onchange' 中调用这个函数？ **

最终更新：我认为使用 jQuery 更容易做到这一点。 jQuery: Conditional show an element based on drop down box selection

Javascript： 解释： 1、在做出任何选择之前，只能看到一个下拉菜单“应用方法” 2. 如果从父框中选择“Aerial Spray”，则会出现一个新的下拉菜单“Aerial Size Dist” 3.如果从父框中选择“地喷”，则需要输入另一个下拉列表“地喷类型”

<script type="text/javascript">
function display(obj,id1,id2) 
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';

if ( txt.match(id1) ) document.getElementById(id1).style.display = 'block';
if ( txt.match(id2) ) document.getElementById(id2).style.display = 'block';
</script>

<table>
<tbody align="center">
<tr><th>Application method:</th>
<td><select onchange="display(this,'A','B')" name="method" id="id_method">
<option value="">Pick a method</option>
<option value="A">Aerial Spray</option>
<option value="B">Ground Spray</option>
</select></td></tr></tbody>

<tbody id="A" align="center" style="display: none;">
<tr><th><label for="id_aerial_size_dist">Aerial Size Dist:</label></th><td><select select name="aerial_size_dist" id="id_aerial_size_dist">
<option value="" selected="selected">Pick first</option>
<option value="A1">Very Fine to Fine</option>
<option value="A2">Fine to Medium (EFED Default)</option>
</select></td></tr>
</tr>
</tbody>

<tbody id="B" align="center" style="display: none;">
<tr><th><label for="id_spray_type">Ground spray type:</label></th><td><select name="spray_type" id="id_spray_type">
<option value="B1" selected="selected">Low Boom Ground Sprayer (20 Inches or Less)</option>
<option value="B2">High Boom Ground Sprayer (20 to 50 Inches: EFED Default)</option>
</select></td></tr></tbody></table>

Django 代码，现在无法使用。它需要有关所有已定义函数“显示”的帮助。

更新，添加mark_safe后，代码可以工作了。

class GENEECInp(forms.Form):
    application_method = forms.ChoiceField(required=True, choices=applicationmethod_CHOICES, initial='Aerial Spray',
                                           widget=forms.Select(attrs='onchange':mark_safe("display(this,'A','B','C','D');"))

【问题讨论】：

这是一个 JavaScript 的东西。查看 jQuery

@icn，我是一个编程新手......你可以给我一个这种应用程序的例子吗？谢谢！

【参考方案1】：

您将需要一些自定义 javascript 来隐藏或取消隐藏相应的字段。这个小部件中是否有任何 javascript？

【讨论】：

我认为我得到的唯一 javascript 是“onchange”的东西。那我应该看看 Django 媒体类吗？

我没有正确阅读。你可以通过设置 onchange 来做你正在做的事情，但我认为这不是有效的 javascript。例如，您的 size 字段可能在实际呈现的 HTML 中显示为 id_size。我已将我的 javascript 作为使用媒体类包含的单独 javascript 文件完成。您可以按照自己的方式进行操作，但请确保您的 javascript 是正确的。

我可以通过使用 JavaScript 定义一个函数来实现这个功能，但是你知道如何以 Django 形式调用这个函数吗？请查看更新后的帖子。

越来越近了，还是有很多问题。 1.在你的python代码中，你有'display(this,'A','B','C','D');''。 A/B/C/D 最终没有被引用。您可以考虑使用'display(this,"A","B","C","D");'。

最后，想办法实现这个功能。 widget=forms.Select(attrs='onchange':mark_safe("display(this,'A','B','C','D');") 但是，看起来 jQuery 会更好解决方案。***.com/questions/10200498/…