Javascript jQuery和HTML，如何根据另一个表单的值隐藏表单？

我需要使用JavaScript根据另一个表单的值隐藏一个表单

假设我们有以下HTML：

<div class="form-row">
     <div class="form-group col-2 0 mb-0" id="one" >
         {{form.x|as_crispy_field}}
     </div>
     <div class="form-group col-2 0 mb-0 d-none" id="two">
         {{form.y|as_crispy_field}}
     </div>
</div>

编辑

关于表单.y的Html如下所示：

<select name="y" class="select form-control" id="id_y">
  <option value="Hide">Hide</option>
  <option value="Not Hide">Not Hide</option>
</select>

---

同样，正如在注释中所指出的，您在这里处理的是两个表单元素，而不是两个表单。您正在使用正确的表单事件，但没有针对正确的表单元素。以下是您如何做到这一点：

$('#id_y').on('change', function() {
    if( this.value === 'Hide' ) {
        $('#one').hide();
    } else {
        $('#one').show();
    }
})
.change();

演示：

$'id_y'。在'change'上，函数{ 如果this.value==“隐藏”{ $‘一’。隐藏； }否则{ $‘一’节目； } } 改变 这里有一些表单元素 隐藏 不隐瞒

---

不要将服务器端代码或模板代码与html混合使用；JavaScript/jQuery作用于生成的HTML，因此请发布HTML。您的更改事件基于表单x的哪个表单字段？它是一个django字段，在HTML中完全像一个多选下拉选项表单，只有两种可能的状态，隐藏和不隐藏。听起来您只有一个表单；显示HTML的更多理由。在浏览器中打开表单，检查相关元素，捕获并发布相关HTML。谢谢你@Federico De MarcoOkey我按照你的指示做了，我已经编辑了答案。@PeterKA我能再问你一个问题吗？

$('#id_y').on('change', function() {
    if( this.value === 'Hide' ) {
        $('#one').hide();
    } else {
        $('#one').show();
    }
})
.change();