Как скрыть поля в форме 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();
    }
});