Изменить значение select исходя из значения другого select в шаблонах Django

Есть два идентичных select, как сделать так, чтобы при выборе в первом селекте value=1, это значение удалялось из второго? Желательно без js, но если нет других вариантов тоже буду очень благодарен) Образно html:

<select id='zakazchik'>
  <option value='1'>OOO ODIN</option>
  <option value='2'>OOO DVA</option>
  <option value='3'>OOO .....</option>
  </select>
 
 <select id='ispolnitel'>
  <option value='1'>OOO ODIN</option>
  <option value='2'>OOO DVA</option>
  <option value='3'>OOO .....</option>
 </select>

из django проекта:

forms.py

class AddContractForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['type'].empty_label = 'Не выбрано'
        self.fields['do'].empty_label = 'Не выбрано'
        # self.fields['author'].empty_label = '1'

    class Meta:
        model = Contract
        # fields = '__all__'
        fields = ['type', 'name', 'date_at', 'date_to', 'do', 'po', 'author', 'blob']

views.py

class AddContract(CreateView):
    model = Contract
    form_class = AddContractForm
    template_name = 'contract/addcontract.html'
    success_url = reverse_lazy('home')


    def get_context_data(self, *, object_list=None, **kwargs):
        context = super().get_context_data(**kwargs)
        context['title'] = 'Добавление договора'
        return context

html

       <form action="{% url 'addcontract' %}" enctype="multipart/form-data" method="POST">
            {% csrf_token %}
            <div class="'form-error">{{ form.non_field_errors }}</div>
            <p><label for="id_type">Вид договора: {{ form.type }}</label></p>
            <p><label for="id_name">Номер договора: {{ form.name }}</label></p>
            <p><label for="date_at">Дата договора (от): {{ form.date_at }}</label></p>
            <p><label for="date_to">Дата договора (до): {{ form.date_to }}</label></p>
            <p><label for="id_do">Заказчик: {{ form.do }}</label></p>

            <p><label for="id_po">Исполнитель: {{ form.po }}</label></p>
            <p><label for="id_author">Разместил: {{ form.author }}</label></p>
            <p><label for="id_blob">Файл договора: {{ form.blob }}</label></p>
            <button type="submit">Добавить</button>>
        </form>

На самом деле решения кроме как на JS не вижу...

let zak = document.querySelector('#zakazchik')
let isp = document.querySelector('#ispolnitel')
let isp_opts = document.querySelectorAll('#ispolnitel option')

isp_opts[1].selected = true

zak.addEventListener('change', e => {
  let value = e.target.value
  let isp_opt = '#ispolnitel option'

  isp_opts.forEach(e => {
    e.style.display = ''
  })

  if(isp.value === value)
    isp.value = document.querySelector(isp_opt+':not([value="'+value+'"])').value

  document.querySelector(isp_opt+'[value="'+value+'"]').style.display = 'none'
})
<select id='zakazchik'>
  <option value='1'>OOO ODIN</option>
  <option value='2'>OOO DVA</option>
  <option value='3'>OOO TRI</option>
</select>

<select id='ispolnitel'>
  <option value='1'>OOO ODIN</option>
  <option value='2'>OOO DVA</option>
  <option value='3'>OOO TRI</option>
</select>

Если есть вопрос по коду, то напишите в комментариях, что не ясно постараюсь объяснить.

Вернуться на верх