有没有一种方法可以根据一个属性来更改表单的属性？

Question

我正在使用 ClassBasedView，其中字段 x 是具有特定选择的 char 字段。

我想知道是否可以在选择 x 之前隐藏字段 y 和 z，并根据选择添加字段 y 或 z。

class BookCreateView(LoginRequiredMixin, CreateView):


    model = Book

    fields = ['x', 'y', 'z']

Answer 1

您可以通过使用 JavaScript（包括 jQuery）根据“x”字段中的选定选项动态显示/隐藏以及添加/删除字段来实现此目的。下面是一个使用 jQuery 最初隐藏“y”和“z”的示例，并在选择“x”中的特定选项时显示它们。

这是一个帮助您入门的示例脚本。请根据您的具体需求进行调整：

<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- Your form HTML -->
<form id="book-form" method="post" action="{% url 'your_create_view_url' %}">
  {% csrf_token %}
  {{ form.as_p }}
  <input type="submit" value="Submit">
</form>

<!-- Your jQuery script -->
<script>
  $(document).ready(function () {
    // Hide fields 'y' and 'z' initially
    $('#id_y, #id_z').hide();

    // Attach change event to 'x' field
    $('#id_x').on('change', function () {
      var selectedValue = $(this).val();

      // Hide 'y' and 'z' fields
      $('#id_y, #id_z').hide();

      // Show 'y' or 'z' based on the selected value in 'x'
      if (selectedValue === 'your_specific_choice_for_y') {
        $('#id_y').show();
      } else if (selectedValue === 'your_specific_choice_for_z') {
        $('#id_z').show();
      }
    });
  });
</script>