如何根据所选类别隐藏Django表单中的字段？

Question

我需要确保在添加新广告时，选择一个类别，并在表单中隐藏不必要的字段。我知道这是用JS完成的，但是暂时我不太了解，所以我会告诉你是否有人擅长。 例如，当我选择“房屋和土地”时，我希望“舞台”消失：

列表模型：

class Listing(models.Model):
  realtor = models.ForeignKey(Realtor, on_delete=models.CASCADE, verbose_name='Риелтор')
  category = models.ForeignKey(Category, on_delete=models.CASCADE, verbose_name='Категория')
  region = models.ForeignKey(Region, on_delete=models.CASCADE, verbose_name='Область')
  city = models.ForeignKey(City, on_delete=models.CASCADE, verbose_name='Город')
  district = models.ForeignKey(District, on_delete=models.CASCADE, verbose_name='Район')
  title = models.CharField(max_length=200, verbose_name='Заголовок')
  landmark = models.CharField(blank=True, max_length=200, verbose_name='Ориентир')
  description = models.TextField(blank=True, verbose_name='Описание')
  stage = models.IntegerField(default=0, blank=True, verbose_name='Этаж')
  rooms = models.IntegerField(default=0, blank=True, verbose_name='Количество комнат')

forms.py

class ListingForm(forms.ModelForm):

    class Meta:
        model = Listing
        exclude = ('realtor',)

模板中的表格

<form method="POST"  novalidate enctype="multipart/form-data">
   {% csrf_token %}
   {% bootstrap_form form %}
   <input type="submit" value="Добавить" class="btn btn-secondary btn-block">
</form>

我在模板中查看了表单的浏览器结构：

<div class="form-group">
<label for="id_category">Категория</label>
<select name="category" class="form-control" title="" required id="id_category">
  <option value="" selected>---------</option>
  <option value="1">Квартиры</option>
  <option value="2">Коммерческое</option>
  <option value="3">Дома и участки</option>
</select></div>

我要隐藏的字段结构：

<div class="form-group">
   <label for="id_stage">Этаж</label>
   <input type="number" name="stage" value="0" 
   class="form-control" placeholder="Этаж" title="" id="id_stage">
</div>

我尝试执行此操作，但是它尚不起作用：

<script>
    $('#id_category').change(function () {
      var optionSelected = $("option:selected", this);
      var valueSelected = $(this).val();

      if (valueSelected === 3){
          $('#id_rooms').hide();
      } else {
          $('#id_rooms').show();
      }
    });
  </script>

如果您知道，请告诉我，或举个例子。预先谢谢你。

Answer 1

在模板的标记中，您需要使用javascript在第一个字段更改时添加事件侦听器。

在该事件侦听器中，如果值是“选定类别”，请使用javascript隐藏或显示表单中的字段。

例如，如果我有这样的表格：

<form>
     <select id="select">
          <option value="1">1</option>
          <option value="2">2</option>
     </select>
     <input id="field">Input Field</input>
</form>

在JQuery中，这看起来像这样：

$('#select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;

    if (valueSelected === 1){
        $('#field').hide();
    } else {
        $('#field').show();
    }
});