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

【问题标题】：jQuery and HTML, how to hide form based on value of another form?jQuery和HTML，如何根据另一个表单的值隐藏表单？
【发布时间】：2020-05-17 12:36:18
【问题描述】：

我需要使用 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 是 x 具有等于“隐藏”的值。用 jQuery 怎么弄？

我尝试了以下代码，但它不起作用：

       function check_field_value() {
           if($(this).val() == 'Hide') {
                $('#two').removeClass('d-none');
           } else {
                $('#two').addClass('d-none');
           }
       }

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

           $('#one').change(check_field_value);
           check_field_value.call($('#one').get(0));
       });

编辑

关于form.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>

【问题讨论】：

不要将服务器端代码或模板代码与 html 混合； JavaScript/jQuery 作用于生成的 HTML - 所以 please 发布 HTML。您的 change 事件究竟基于什么表单 x 字段？
x 它是一个 django 字段，完全可以作为多项选择（HTML 中的下拉选项表单）并且只有两种可能的状态，“隐藏”和“不隐藏”
现在听起来你有一个表格；显示 HTML 的更多理由。在浏览器中打开表单并inspect 相关元素并捕获并发布相关的HTML。谢谢@Federico De Marco
好吧，我按照你的指示编辑了答案。
@PeterKA 我能再问你一个问题吗？

标签： javascript html jquery ajax templates

【解决方案1】：

同样，如 cmets 中所述，您在这里处理的是两个表单元素，而不是两个表单。您正在使用正确的表单事件，但没有针对正确的表单元素。以下是你可以做到的：

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

演示：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
     <div class="form-group col-2 0 mb-0" id="one" >
         Some form element here
     </div>
     <div class="form-group col-2 0 mb-0 d-none" id="two">
         <select name="y" class="select form-control" id="id_y">
            <option value="Hide">Hide</option>
            <option value="Not Hide">Not Hide</option>
          </select>
     </div>
</div>

如果您的选项元素是：

<option value="hide">Hide</option>
<option value="show">Not Hide</option>

那么你的代码就是：

$('#id_y').on('change', function() {
    $('#one')[this.value]();
})
.change();

演示：

$('#id_y').on('change', function() {
    $('#one')[this.value]();
})
.change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
     <div class="form-group col-2 0 mb-0" id="one" >
         Some form element here
     </div>
     <div class="form-group col-2 0 mb-0 d-none" id="two">
         <select name="y" class="select form-control" id="id_y">
            <option value="hide">Hide</option>
            <option value="show">Not Hide</option>
          </select>
     </div>
</div>

【讨论】：