如何根据其值显示要显示的表单

Question

我希望我可以显示我在组合中选择的表格（在学生和员工之间）

问题可能出在我的 jquery 因为通过更改隐藏或显示表单的值，但我希望她通过更改我的组合值来显示所需的表单学生 --> 学生表格员工 --> EmployeeForm

但是当我更改列表的值时，表单保持不变...

这是我的表单代码

user_profile.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>

{% extends "polls/base.html" %}
{% block title %}Création d'un profil{% endblock %}
{% block bodyId %}userProfilePage{% endblock %}
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> -->

{% block content %}
<script type="text/javascript">
function displayRightForm() {
    if ($("#profileType").val() == 'student') {
        $('#employeeForm').hide();
        $('#studentForm').show();
    }
    else {
        $('#studentForm').hide();
        $('#employeeForm').show();
    }
}
$(document).ready(displayRightForm);
$('#profileType').change(displayRightForm);
</script>
<h1>Création d'un compte</h1>

<form>
    <p>
        <label for="profileType">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="studentForm">
    {{ studentForm.as_p }}
    {% csrf_token %}
    <p>
        <input type="hidden" name="profileType" value="student" />
        <input type="submit" value="Créer un compte" />
    </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>

<link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
{% endblock %}

The jquery works because if I pass

if ($("#profileType").val() == 'student') {
            $('#employeeForm').hide();
            $('#studentForm').show();
        }

in

if ($("#profileType").val() == 'student') {
        $('#employeeForm').show();
        $('#studentForm').show();
    }

这向我展示了两个可以遵循的好形式

我用这个link换了jquery，对吗？

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

感谢您抽出宝贵时间！

Answer 1

按如下方式更改您的脚本：

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

    function displayRightForm() {
        if ($("#profileType").val() == 'student') {
            $('#employeeForm').hide();
            $('#studentForm').show();
        } else {
            $('#studentForm').hide();
            $('#employeeForm').show();
        }
    }

    $('select').on('change', function() {
        displayRightForm();
    });
</script>

如何根据其值显示要显示的表单

How to display the form that is to be based on its value

javascript

forms

jquery

combobox

jcombobox