Все привет. Мне нужно сделать так, чтобы при добавлении нового объявления, выбирая категорию, скрывались ненужные поля в форме. Понимаю, что это делается чере 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 src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<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>
Если знаете, подскажите, пожалуйста, или пример какой, как это делается. Заранее, спасибо.
