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

我需要确保在添加新广告时，选择类别，在表单中隐藏不必要的字段。我知道这是在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>

{%csrf_令牌%}
{%bootstrap_form%}

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

<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>

$（'#id_category'）。更改（函数（）{
var optionSelected=$（“选项：已选择”，此选项）；
var valueSelected=$（this.val（）；
如果（所选值===3）{
$（'id#u rooms'）。隐藏（）；
}否则{
$（'id#u rooms'）。show（）；
}
});

---

如果你知道的话，请告诉我，或者举个例子。提前感谢您。

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

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

例如，如果我有这样一个表单：

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

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

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

---

但是我有django表单，我必须在view.py中编写其他东西。它应该仍然有效，因为django正在模板内生成表单html。尝试在浏览器中检查表单以查看DOM结构。下面是另一个您尝试执行的示例：