Форма не отправляется, когда я использую в шаблоне поля select (зависимые друг от друга), используя Django

Я заметил, что моя форма не хочет отправляться из-за 2 полей, которые зависят друг от друга (зависимый выпадающий список, где я сделал значение поля "pid" (выход в 2 моделях) как общую точку между 2 полями), после нажатия на кнопку значения, которые я выбрал их как пользователь, исчезают автоматически при нажатии на кнопку и таким же образом форма не хочет отправляться:

это 2 поля, которые я назвал в html шаблоне: Вот код

        <select  id="select1">
          <option selected disabled="true"></option>
          {% for categories in categoryobj%}
          <option value="{{categories.pid}}">{{categories.name}}</option>
          {% endfor%}
      </select>                        
      <select  id="select2">
        <option selected disabled="true"></option>
        {% for items_size in sizeobj%}
        <option value="{{items_size.pid}}">{{items_size.name}}</option>
        {% endfor%}
    </select> 

Js

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
                $(document).ready(function(){
                     var $select1=$('#select1'),
                         $select2=$('#select2'),
                         $options = $select2.find('option');

                         $select1.on('change',function()
                         {  
                          $select2.html($options.filter('[value="'+this.value+'"]'));
                         }).trigger('change');
            });
  </script>

с кнопкой отправки:

  <button class="floated" onclick="location.href='#results'" type="submit">Submit</button>

Ps: если я изменю эти два поля на

тег

: код html:

               <p >{{form.profile_family}} </p> 
               <p >{{form.profile_size}} </p> 

-----> форма отправляется. ----> Но я не хочу именно этого, я хочу зависимый выпадающий список. Любая помощь будет оценена по достоинству, пожалуйста, спасибо.

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