基于Django表单中的其他字段显示表单字段

我试图创建一种方法，根据同一表单中另一个字段的绑定数据，仅显示django表单中的某些字段。我熟悉form.field.bound_类型的概念，但我不知道如何持续检查表单中某个字段的状态更改，并相应地更新另一个字段。比如，如果你填写一份申请表，它询问你是否犯罪，如果你单击“是”，那么会弹出一个详细信息文本区域

我正在使用： Django 1.8.4 Bootstrap3 6.6.2

因为它与这个问题有关。以下是我目前为工作保护编辑的字段值。它可以做一些工作。表示表单很好，if语句最初工作，但一旦指定的字段发生更改，它不会重新计算if

<form action= "/send_email/" method="post" class='col-sm-5'>
    {% csrf_token %}
    {% bootstrap_field form.field_one%}
    {% bootstrap_field form.field_two%}
    {% bootstrap_field form.field_three%}
    {% if form.field_three.bound_data == "A Value" %}
        {% bootstrap_field form.field_four%}
    {% endif %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">
            {% bootstrap_icon "glyphicon glyphicon-ok-circle" %} Submit
        </button>
    {% endbuttons %}
</form>

{%csrf_令牌%}
{%bootstrap\字段形式。字段\一个%}
{%bootstrap\字段形式。字段\两个%}
{%bootstrap_字段形式。字段_三%}
{%if form.field\u three.bound\u data==“A值”%}
{%bootstrap_字段形式。字段_四%}
{%endif%}
{%buttons%}
{%bootstrap_icon“glyphion glyphion ok circle”%}提交
{%endbuttons%}

解决方案： 在伯蒂的帮助下，我找到了解决办法。对于遇到与Django相同的问题的人，这里是如何基于相同形式的另一个字段添加或删除字段

<script>

    // function that hides/shows field_four based upon field_three value
    function check_field_value(new_val) {
        if(new_val != 'A value') {
            // #id_field_four should be actually the id of the HTML element
            // that surrounds everything you want to hide.  Since you did
            // not post your HTML I can't finish this part for you.
            $('#field_four').removeClass('hidden');
        } else {
            $('#field_four').addClass('hidden');
        }
    }



    // this is executed once when the page loads
    $(document).ready(function() {

        // set things up so my function will be called when field_three changes
        $('#field_three').change( function() {
            check_field_value(this.value);
        });

    });

</script>
<form action= "/send_email/" method="post" class='col-sm-5'>
    {% csrf_token %}
    {% bootstrap_field form.field_one%}
    {% bootstrap_field form.field_two%}
    <div id="field_three">{% bootstrap_field form.field_three%}</div>
    <div id="field_four">{% bootstrap_field form.additional_notes %}</div>
    {% buttons %}
        <button type="submit" class="btn btn-primary">
            {% bootstrap_icon "glyphicon glyphicon-ok-circle" %} Submit
        </button>
    {% endbuttons %}
</form>

//基于字段\三值隐藏/显示字段\四的函数
功能检查\字段\值（新值）{
如果（新值！=“A值”）{
//#id_field_four实际上应该是HTML元素的id
//你想隐藏的东西都被包围了。自从你这么做了
//不要发布你的HTML，我不能为你完成这部分。
$（'#field_four'）。removeClass（'hidden'）；
}否则{
$（'字段四'）.addClass（'隐藏'）；
}
}
//这在页面加载时执行一次
$（文档）.ready（函数（）{
//设置内容，以便在字段_三发生更改时调用我的函数
$（'#字段_三'）。更改（函数（）{
检查_字段_值（this.value）；
});
});
{%csrf_令牌%}
{%bootstrap\字段形式。字段\一个%}
{%bootstrap\字段形式。字段\两个%}
{%bootstrap_字段形式。字段_三%}
{%bootstrap_字段形式。附加_注释%}
{%buttons%}
{%bootstrap_icon“glyphion glyphion ok circle”%}提交
{%endbuttons%}

您不能在模板中执行此操作，因为模板在服务器端执行，但用户交互发生在客户端。。在浏览器中。这必须在javascript中完成，并在浏览器中运行

下面是一个jQuery代码的示例，它实现了这一点。我没有测试它，所以它可能需要调整，但这应该让你在正确的方向

您需要查看HTML以确定实际要隐藏（）和显示（）的元素的id。通常，您会有某种HTML元素（例如DIV）围绕要隐藏的一个或多个字段以及标签。。通过隐藏包含所有字段的元素，而不是每个字段本身，可以一次隐藏所有内容

如果您在问题中添加HTML环绕字段_-four，我将更新答案以使用您的答案

<script>
// Ideally this script (javascript code) would be in the HEAD of your page
// but if you put it at the bottom of the body (bottom of your template) that should be ok too.
// Also you need jQuery loaded but since you are using bootstrap that should
// be taken care of.  If not, you will have to deal with that.

    // function that hides/shows field_four based upon field_three value
    function check_field_value() {
        if($(this).val() == 'A Value') {
            // #id_field_four should be actually the id of the HTML element
            // that surrounds everything you want to hide.  Since you did
            // not post your HTML I can't finish this part for you.  
            $('#id_field_four').hide();
        } else {
            $('#id_field_four').show();
        }
    }

    // this is executed once when the page loads
    $(document).ready(function() {
        // set things up so my function will be called when field_three changes
        $('#id_field_three').change(check_field_value);

        // set the state based on the initial values
        check_field_value.call($('#id_field_three').get(0));
    });

</script>

//理想情况下，此脚本（javascript代码）将位于页面的头部
//但是如果你把它放在正文的底部（模板的底部），也应该可以。
//您还需要加载jQuery，但由于您使用的是引导，因此
//得到照顾。如果没有，你将不得不处理这个问题。
//基于字段\三值隐藏/显示字段\四的函数
函数检查\字段\值（）{
if（$（this）.val（）=='A Value'）{
//#id_field_four实际上应该是HTML元素的id
//你想隐藏的东西都被包围了。自从你这么做了
//不要发布你的HTML，我不能为你完成这部分。
$（'#id_field_four'）.hide（）；
}否则{
$（'id#field_four'）.show（）；
}
}
//这在页面加载时执行一次
$（文档）.ready（函数（）{
//设置内容，以便在字段_三发生更改时调用我的函数
$（“#id_field_three”）。更改（检查_field_值）；
//根据初始值设置状态
检查_field_value.call（$（'#id_field_three'）.get（0））；
});
谢谢大家的贡献，但我无法获得上面的代码。这是我的解决方案：

<script>
    function hideField() {
      check = document.getElementsByName("put your field name here")[0].value;
      response = document.getElementById("put your id here");
      if (check === "Open") {
         response.style.display = "none";
        }else{
          response.style.display = "block";
        }
      }
  </script>


函数hideField（）{
check=document.getElementsByName（“在此处输入字段名”）[0]。值；
response=document.getElementById（“将您的id放在这里”）；
如果（检查==“打开”）{
response.style.display=“无”；
}否则{
response.style.display=“block”；
}
}

关键是找出要隐藏的字段的Id，以及要检查的字段的名称。我没有使用DIV容器来分配id和名称，但在浏览器中使用开发人员工具检查了呈现的HTML页面。如果您有问题或需要更详细的解释，请告诉我。
我发现这个问题非常有趣。我已经用bootstrap 4.0v对其进行了更新，使用以下脚本，我希望它能帮助到某些人：

<script>

    // function that hides/shows field_four based upon field_three value
    function check_field_value(new_val) {
        if(new_val != 'A value') {
            // #id_field_four should be actually the id of the HTML element
            // that surrounds everything you want to hide.  Since you did
            // not post your HTML I can't finish this part for you.
            $('#field_four').removeClass('d-none');
        } else {
            $('#field_four').addClass('d-none');
        }
    }



    // this is executed once when the page loads
    $(document).ready(function() {

        // set things up so my function will be called when field_three changes
        $('#field_three').change( function() {
            check_field_value(this.value);
        });

    });

</script>
<form action= "/send_email/" method="post" class='col-sm-5'>
    {% csrf_token %}
    {% bootstrap_field form.field_one%}
    {% bootstrap_field form.field_two%}
    <div id="field_three">{% bootstrap_field form.field_three%}</div>
    <div id="field_four">{% bootstrap_field form.additional_notes %}</div>
    {% buttons %}
        <button type="submit" class="btn btn-primary">
            {% bootstrap_icon "glyphicon glyphicon-ok-circle" %} Submit
        </button>
    {% endbuttons %}
</form>


//基于字段\三值隐藏/显示字段\四的函数
功能检查\字段\值（新值）{
如果（新值！=“A值”）{
//#id_field_four实际上应该是HTML元素的id
//你想隐藏的东西都被包围了。自从你这么做了
//不要发布你的HTML，我不能为你完成这部分。
$（'#field_four'）。removeClass（'d-none'）；
}否则{
$（'字段四'）.addClass（'d-none'）；