Джанго. Как сделать условие для скрытия / отображения полей в форме, чтобы оно зависело от бэкэнда?

Question

Я хочу сделать условие, при котором не будет необходимости изменять код, если данные в базе данных были удалены.Теперь у меня есть простое условие:

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

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

То есть, когда вы выбираете определенную категорию, ненужные поля скрываются.Но если вы удалите категории в базе данных, и категории будут добавлены снова не в том порядке, в котором они были раньше, условие перестанет работать.Потому что выбор будет другим.

<div class="col-md-3 mb-3">       
                <label class="sr-only">Categories</label>
                <select name="category" class="form-control" id="category_id">
                  <option selected="true" disabled="disabled">Categories</option>
                  {% for category in categories %}
                    <option value="{{ category.pk }}">{{ category.name }}</option>
                  {% endfor %}
                </select>
              </div>

Это поля должны быть скрыты:

<div class="col-md-6 mb-3">
                <label class="sr-only">Комнаты</label>
                  <select name="rooms" class="form-control" id="rooms_id">
                    <option selected="true" disabled="disabled">Комнаты</option>
                    {% for key, value in room_choices.items %}
                      <option value="{{ key }}">{{ value }}</option>
                    {% endfor %}
                  </select>
                </div>

              <div class="col-md-6 mb-3">
                <label class="sr-only">Серия</label>
                <select name="series" class="form-control" id="series_id">
                  <option selected="true" disabled="disabled">Серия</option>
                  {% for series in series %}
                    <option value="{{ series.pk }}">{{ series.name }}</option>
                  {% endfor %}
                </select>
              </div>

Теперь все работает только в этой последовательности, но если вы добавляете категории в базу данных в другом порядке, то ничего не работает, потому что это решение не совсем правильно.Пожалуйста, помогите:)