jQuery按选择值在行中隐藏字段

编程问答 2022-06-13

问题描述

我的Django应用中有某种形式，并且如果 Type 字段中的值是，则需要显示名称为 From 和 To 的字段等于 Integer ，否则将其隐藏到此行的字段中。

我该怎么做？

    .delete-row {
        align-self: center;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>


<fieldset>
  <legend>Schema columns</legend>
  </style> <input type="hidden" name="csv_name-TOTAL_FORMS" value="4" id="id_csv_name-TOTAL_FORMS"> <input type="hidden" name="csv_name-INITIAL_FORMS" value="0" id="id_csv_name-INITIAL_FORMS"> <input type="hidden" name="csv_name-MIN_NUM_FORMS" value="0" id="id_csv_name-MIN_NUM_FORMS"> <input type="hidden" name="csv_name-MAX_NUM_FORMS" value="1000" id="id_csv_name-MAX_NUM_FORMS"> <input type="hidden" name="csv_name-0-id" id="id_csv_name-0-id"> <input type="hidden" name="csv_name-0-csv_file" id="id_csv_name-0-csv_file">
  <div class="form-row row form-row spacer mt-2 input-group formset_row-csv_name dynamic-form">
<div class="col col-3">
  <div id="div_id_csv_name-0-column_name" class="form-group"> <label for="id_csv_name-0-column_name" class=" requiredField">
      Column name<span class="asteriskField">*</span> </label>
    <div class=""> <input type="text" name="csv_name-0-column_name" maxlength="255" class="textinput textInput form-control" id="id_csv_name-0-column_name"> </div>
  </div>
</div>
<div id="seeAnotherField" class="col col-2">
  <div id="div_id_csv_name-0-column_type" class="form-group"> <label for="id_csv_name-0-column_type" class=" requiredField">
      Type<span class="asteriskField">*</span> </label>
    <div class=""> <select name="csv_name-0-column_type" class="select form-control" id="id_csv_name-0-column_type">
        <option value="Full Name">Full Name</option>
        <option value="Integer">Integer</option>
        <option value="Email">Email</option>
        <option value="Company">Company</option>
        <option value="Job">Job</option>
        <option value="Date">Date</option>
        <option value="Phone Number">Phone Number</option>

      </select> </div>
  </div>
</div>
<div id="otherField" class="col col-1">
  <div id="div_id_csv_name-0-min_int" class="form-group __web-inspector-hide-shortcut__"> <label for="id_csv_name-0-min_int" class="">
      From
    </label>
    <div class=""> <input type="text" name="csv_name-0-min_int" class="textinput textInput form-control" id="id_csv_name-0-min_int"> </div>
  </div>
</div>
<div id="otherField" class="col col-1 __web-inspector-hide-shortcut__">
  <div id="div_id_csv_name-0-max_int" class="form-group"> <label for="id_csv_name-0-max_int" class="">
      To
    </label>
    <div class=""> <input type="text" name="csv_name-0-max_int" class="textinput textInput form-control" id="id_csv_name-0-max_int"> </div>
  </div>
</div>
<div class="col col-2">
  <div id="div_id_csv_name-0-column_order" class="form-group"> <label for="id_csv_name-0-column_order" class=" requiredField">
      Order<span class="asteriskField">*</span> </label>
    <div class=""> <input type="text" name="csv_name-0-column_order" value="1" class="textinput textInput form-control" id="id_csv_name-0-column_order"> </div>
  </div>
</div>

<a class="delete-row btn-sm btn-danger" href="javascript:void(0)">Delete</a>
  </div>
  <div class="form-row row form-row spacer mt-2 input-group formset_row-csv_name dynamic-form">
<div class="col col-3">
  <div id="div_id_csv_name-1-column_name" class="form-group"> <label for="id_csv_name-1-column_name" class=" requiredField">
      Column name<span class="asteriskField">*</span> </label>
    <div class=""> <input type="text" name="csv_name-1-column_name" maxlength="255" class="textinput textInput form-control" id="id_csv_name-1-column_name"> </div>
  </div>
</div>
<div id="seeAnotherField" class="col col-2">
  <div id="div_id_csv_name-1-column_type" class="form-group"> <label for="id_csv_name-1-column_type" class=" requiredField">
      Type<span class="asteriskField">*</span> </label>
    <div class=""> <select name="csv_name-1-column_type" class="select form-control" id="id_csv_name-1-column_type">
        <option value="Full Name">Full Name</option>
        <option value="Integer">Integer</option>
        <option value="Email">Email</option>
        <option value="Company">Company</option>
        <option value="Job">Job</option>
        <option value="Date">Date</option>
        <option value="Phone Number">Phone Number</option>

      </select> </div>
  </div>
</div>
<div id="otherField" class="col col-1 __web-inspector-hide-shortcut__">
  <div id="div_id_csv_name-1-min_int" class="form-group"> <label for="id_csv_name-1-min_int" class="">
      From
    </label>
    <div class=""> <input type="text" name="csv_name-1-min_int" class="textinput textInput form-control" id="id_csv_name-1-min_int"> </div>
  </div>
</div>
<div id="otherField" class="col col-1 __web-inspector-hide-shortcut__">
  <div id="div_id_csv_name-1-max_int" class="form-group"> <label for="id_csv_name-1-max_int" class="">
      To
    </label>
    <div class=""> <input type="text" name="csv_name-1-max_int" class="textinput textInput form-control" id="id_csv_name-1-max_int"> </div>
  </div>
</div>
<div class="col col-2">
  <div id="div_id_csv_name-1-column_order" class="form-group"> <label for="id_csv_name-1-column_order" class=" requiredField">
      Order<span class="asteriskField">*</span> </label>
    <div class=""> <input type="text" name="csv_name-1-column_order" value="1" class="textinput textInput form-control" id="id_csv_name-1-column_order"> </div>
  </div>
</div>

<a class="delete-row btn-sm btn-danger" href="javascript:void(0)">Delete</a>
  </div>
  <div class="form-row row form-row spacer mt-2 input-group formset_row-csv_name dynamic-form">
<div class="col col-3">
  <div id="div_id_csv_name-2-column_name" class="form-group"> <label for="id_csv_name-2-column_name" class=" requiredField">
      Column name<span class="asteriskField">*</span> </label>
    <div class=""> <input type="text" name="csv_name-2-column_name" maxlength="255" class="textinput textInput form-control" id="id_csv_name-2-column_name"> </div>
  </div>
</div>
<div id="seeAnotherField" class="col col-2">
  <div id="div_id_csv_name-2-column_type" class="form-group"> <label for="id_csv_name-2-column_type" class=" requiredField">
      Type<span class="asteriskField">*</span> </label>
    <div class=""> <select name="csv_name-2-column_type" class="select form-control" id="id_csv_name-2-column_type">
        <option value="Full Name">Full Name</option>
        <option value="Integer">Integer</option>
        <option value="Email">Email</option>
        <option value="Company">Company</option>
        <option value="Job">Job</option>
        <option value="Date">Date</option>
        <option value="Phone Number">Phone Number</option>

      </select> </div>
  </div>
</div>
<div id="otherField" class="col col-1">
  <div id="div_id_csv_name-2-min_int" class="form-group"> <label for="id_csv_name-2-min_int" class="">
      From
    </label>
    <div class=""> <input type="text" name="csv_name-2-min_int" class="textinput textInput form-control" id="id_csv_name-2-min_int"> </div>
  </div>
</div>
<div id="otherField" class="col col-1">
  <div id="div_id_csv_name-2-max_int" class="form-group"> <label for="id_csv_name-2-max_int" class="">
      To
    </label>
    <div class=""> <input type="text" name="csv_name-2-max_int" class="textinput textInput form-control" id="id_csv_name-2-max_int"> </div>
  </div>
</div>
<div class="col col-2">
  <div id="div_id_csv_name-2-column_order" class="form-group"> <label for="id_csv_name-2-column_order" class=" requiredField">
      Order<span class="asteriskField">*</span> </label>
    <div class=""> <input type="text" name="csv_name-2-column_order" value="1" class="textinput textInput form-control" id="id_csv_name-2-column_order"> </div>
  </div>
</div>

<a class="delete-row btn-sm btn-danger" href="javascript:void(0)">Delete</a>
  </div>
  <div class="form-row row form-row spacer mt-2 input-group formset_row-csv_name dynamic-form">
<div class="col col-3">
  <div id="div_id_csv_name-3-column_name" class="form-group"> <label for="id_csv_name-3-column_name" class=" requiredField">
      Column name<span class="asteriskField">*</span> </label>
    <div class=""> <input type="text" name="csv_name-3-column_name" maxlength="255" class="textinput textInput form-control" id="id_csv_name-3-column_name"> </div>
  </div>
</div>
<div id="seeAnotherField" class="col col-2">
  <div id="div_id_csv_name-3-column_type" class="form-group"> <label for="id_csv_name-3-column_type" class=" requiredField">
      Type<span class="asteriskField">*</span> </label>
    <div class=""> <select name="csv_name-3-column_type" class="select form-control" id="id_csv_name-3-column_type">
        <option value="Full Name">Full Name</option>
        <option value="Integer">Integer</option>
        <option value="Email">Email</option>
        <option value="Company">Company</option>
        <option value="Job">Job</option>
        <option value="Date">Date</option>
        <option value="Phone Number">Phone Number</option>

      </select> </div>
  </div>
</div>
<div id="otherField" class="col col-1">
  <div id="div_id_csv_name-3-min_int" class="form-group"> <label for="id_csv_name-3-min_int" class="">
      From
    </label>
    <div class=""> <input type="text" name="csv_name-3-min_int" class="textinput textInput form-control" id="id_csv_name-3-min_int"> </div>
  </div>
</div>
<div id="otherField" class="col col-1">
  <div id="div_id_csv_name-3-max_int" class="form-group"> <label for="id_csv_name-3-max_int" class="">
      To
    </label>
    <div class=""> <input type="text" name="csv_name-3-max_int" class="textinput textInput form-control" id="id_csv_name-3-max_int"> </div>
  </div>
</div>
<div class="col col-2">
  <div id="div_id_csv_name-3-column_order" class="form-group"> <label for="id_csv_name-3-column_order" class=" requiredField">
      Order<span class="asteriskField">*</span> </label>
    <div class=""> <input type="text" name="csv_name-3-column_order" value="1" class="textinput textInput form-control" id="id_csv_name-3-column_order"> </div>
  </div>
</div>

<a class="delete-row btn-sm btn-danger" href="javascript:void(0)">Delete</a>
  </div><a class="add-row btn btn-success" href="javascript:void(0)">Add column</a> <br>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="/static/libraries/django-dynamic-formset/jquery.formset.js"></script>
</fieldset>

https://i.stack.imgur.com/3IcXM.png

更新：我将代码添加为带有类名称和字段ID的代码段。所以我需要检查每一行和邻居

解决方法

有多种方法可以解决此问题，但是一个简单的方法就是遍历html树作为邻居（.next（）、. parent（））。

$('input[name="type"]').on('change',function(e) {
  if ($(this).val() == 'integer') {
    // find the From and to and show them
    // as I don't know your html I can only guess
    $(this).parent().next().show()
  } else {
    $(this).parent().next().hide()
  }
})


// For a complete solution you would also check 
// at render time in django template with an {% if %} to show/hide
djangodjango-crispy-formsjavascriptjquery