时间戳

首页 > 解决方案 > jQuery和HTML，如何根据另一个表单的值隐藏表单？

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 的形式，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>

标签： javascripthtmljqueryajaxtemplates

解决方案

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

$('#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>

推荐阅读