仅在选择特定值时显示表单域答案

【问题标题】：Display a form field only when a specific value is selected仅在选择特定值时显示表单域
【发布时间】：2020-07-01 10:13:20
【问题描述】：

如何使 form.gender 字段仅在通过从类别表中获取的下拉列表从 form.category 中选择“Lost Person”时才显示...... .......

index.html

<form method="post" enctype="multipart/form-data" id="personForm" data-cities-url="{% url 
'ajax_load_areas_products' %}" novalidate  >
          {% csrf_token %}
         
          <div class="row">
            <div class="col-md-3">
            {{ form.category | as_crispy_field }}
            </div>
            <div class="col-md-3">
              {{form.product|as_crispy_field}}
            </div>
         </div>
         
         <div class="row">

          <div  class="col-md-6" >
            {{ form.title | as_crispy_field }}
        </div>
          <div class="col-md-6">
            {{ form.gender | as_crispy_field }}
          </div>
         </div>
         <div class="row">
          <div class="col-md-6">
            {{ form.description | as_crispy_field }}
          </div>
          <div class="col-md-6">
            {{ form.photo | as_crispy_field }}
          </div>
          <div class="col-md-6">

          </div>
         </div>
          <button class="btn btn-secondary btn-block mt-4" type="submit">Submit Post</button>
          
        </form>

views.py

def PostCreate(request):

    if request.method == 'POST': 
        form = PostForm(request.POST, request.FILES) 
        if form.is_valid():  
            form.instance.user = request.user
            form.save()
            return redirect('dashboard') 
    else: 
        form = PostForm() 
    return render(request, 'chained/post_form.html', {'form' : form})

【问题讨论】：

您可以尝试在您的类别列表中使用javascript更改事件w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

标签： javascript python django django-forms

【解决方案1】：

将 attr display:none 设置为您的表单。您需要编写一个 javascript 函数并在单击下拉列表中的元素时触发它。有两种方法可以实现这一点，您的下拉元素可以是直接触发 js 代码的按钮，也可以是其他元素，js 函数可以由它们的类或 id 触发。假设您决定使用按钮，您的按钮应如下所示：

<button onclick="display_form(1)"></b>

display_form 函数在您单击此函数时被触发，并且您还将值“1”传递给它，告诉它要做什么。功能：

function display_form(number){
      if(number == 1){
      "here you set the required form's display attr to block and hide all the others"
}
      else if(number == 2)...

如果您根本没有掌握它，只需花几个小时学习 javascript，您就会很快掌握它。祝你好运！

【讨论】：