在Django表单中隐藏组件

我目前正在处理一个django项目，我希望能够在表单中隐藏一些组件，直到用户触发它。我决定手动使用表单，但未能获得所需的结果

下面是处于最简单状态的窗体的图像

我希望加载页面时只显示“名字”、“姓氏”和“您的选择”，用户的选择应触发弹出“您的旅馆”或“您的城市”

以下是手册表格

<form method="post" class="order-form">

{{ form.non_field_errors }}

<div id="first" class="fieldWrapper">
    {{ form.first_name.errors }}
    <label for="{{ form.first_name.id_for_label }}">First Name:</label>
    {{ form.first_name }}
</div>

<div id="last" class="fieldWrapper">
    {{ form.last_name.errors }}
    <label for="{{ form.last_name.id_for_label }}">Last Name:</label>
    {{ form.last_name }}
</div>

<div id="option" class="fieldWrapper">
    {{ form.delivery_option.errors }}
    <label for="{{ form.delivery_option.id_for_label }}">Your Choice:</label>
    {{ form.delivery_option }}
</div>


<div id="hostle" class="fieldWrapper">
    {{ form.hostel.errors }}
    <label for="{{ form.hostel.id_for_label }}">Your Hostel:</label>
    {{ form.hostel }}
</div>


<div id="city" class="fieldWrapper">
    {{ form.city.errors }}
    <label for="{{ form.city.id_for_label }}">Your City:</label>
    {{ form.city }}
</div>

{{form.non_field_errors}}
{{form.first_name.errors}
名字：
{{form.first_name}
{{form.last_name.errors}}
姓氏：
{{form.last_name}
{{form.delivery_option.errors}
您的选择：
{{form.delivery_option}
{{form.hotel.errors}
你的旅馆：
{{form.hotel}}
{{form.city.errors}
您所在的城市：
{{form.city}

有人能帮帮我吗。我对这个环境不熟悉

---

提前感谢

您可以将一些div设置为

hidden

，然后在用户选择一个选项后使用Javascript对其进行更改。我尝试使用此脚本，但它不起作用。

$（“#选项”）.change（function（）{if（$（this）.val（）=“Campus”）{$（'#hostle'）.show（）$（'#city'）.hide（）$（'#hostle'）.attr（'required'，''）}else{$（'#hostle'）.hide（）；$（'#city'）.show（）；}）；$（“#选项”）.trigger（“change”）；