如何使用组合框隐藏/显示表单答案

【问题标题】：How to hide / display a forms with a combo box如何使用组合框隐藏/显示表单
【发布时间】：2016-04-20 20:19:21
【问题描述】：

大家好：D 我不知道如何在两个可行的选择之间隐藏或显示我想要的形式。

学生 --> 学生表格

员工 --> 员工表格

发生的事情是，虽然它改变了形式，但是当我按下提交按钮而不是选择我的组合框时！然而所选组合框的名称变化很大我不明白：3 为此，我交换了两种表格，即学生表格显示员工表格，反之亦然...

如果我在出现并提交的学生表单什么都不做时将这些值逻辑地放在那里我的代码是用 Django python 编码的

我的 jquery 或我不知道的表单有什么问题？

这是我的模板

<!DOCTYPE html>

{% extends "polls/base.html" %}
{% block title %}Création d'un profil{% endblock %}
{% block bodyId %}userProfilePage{% endblock %}

{% block content %}
<script type="text/javascript" src="/static/js/jquery-1.12.0.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        displayRightForm();
    });

    function displayRightForm() {
        if ($("#profileType").val() == 'employee') {
            $('#employeeForm').hide();
            $('#studentForm').show();
        } else {
            $('#studentForm').hide();
            $('#employeeForm').show();
        }
    }
$('select').on('change', function() {
    displayRightForm();
});
</script>


<h1>Création d'un compte</h1>
<form>
    <p>
        <label>Vous êtes :</label>
        <select id="profileType">
            <option value="student" {% if studentForm.is_bound %} selected="selected" {% endif %}>Étudiant</option>
            <option value="employee" {% if employeeForm.is_bound %} selected="selected" {% endif %}>Employé</option>
        </select>
    </p>
</form>

<form action="register" method="GET" id="employeeForm">
    {{ employeeForm.as_p }}
    {% csrf_token %}
    <p>
        <input type="hidden" name="profileType" value="employee" />
        <input type="submit" value="Créer un compte" />     
    </p>
</form>

<form action="register" method="GET" id="studentForm">
    {{ studentForm.as_p }}
    {% csrf_token %}
    <p>
        <input type="hidden" name="profileType" value="student" />
        <input type="submit" value="Créer un compte" />
    </p>
</form>

<div id="two">


<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>

{% endblock %}

我试过这个方法：

    <script type="text/javascript">
    $(document).ready(function(){
    $('select').on('change', function() {
        if(this.value == 'student')
      {
        $("#student").show();
        $("#employee").hide();
      }
        else if(this.value == 'employee')
      {
        $("#employee").show();
        $("#student").hide();

      }
    });
});
</script>

但是不要再工作了……

【问题讨论】：

你看到我的回答了吗？？我认为它可以按您的意愿工作

标签： javascript jquery python django forms

【解决方案1】：

这里有一个例子：

$(document).ready(function() {

  action();
  $(".disabler").on("change", action);



});

function action() {

  var checked = $(".disabler").prop("checked");

  if (checked) {
    $(".showable").removeClass("hidden");
  } else {
    $(".showable").addClass("hidden");

  }

}

.hidden {
  display: none;
}

.form{
  border: 1px solid black;
  background-color: #aaa;
  padding: 10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Show form
<input class="disabler" type="checkbox">

<div class="showable">
  <h2>Form</h2>
  
  <form class="form">
  Name <input type="text">
  </form>
  
</div>

【讨论】：

@Jérémy Legendre ：工作正常，请使用它。