使用 AJAX 选择下拉菜单选择器时遇到问题

Question

Currently I'm trying to create a page where my database is updated upon a drop event. More specifically, I have a page with drag-drop capabilities, what I need is anytime I drag and drop a particular div (deal-card) into a another div (stage-column), I need to make update to the database, that represents that "deal" placed in a different "stage".

For this project my backend is Django, and up to this point, I'm able to successfully change the basic CharFields on a drop event, though selecting a selector in the drop-down menu has me stumped.

As of now I just arbitrarily picked "value" = 3 for the targeted selector, just to see if I could get it to work. Unfortunately, whatever I try, I always get a prompt saying "This field is required". I attached a picture showing this below.

Any help would be greatly appreciated!

AJAX CODE

$(document).one('drop', function(ev){
            ev.preventDefault();

            var stage_title_path = '#' + el.id + " .stage-title";
            var stage_title = $(stage_title_path).html();
            
            $.ajax({
                type:'POST',
                url:deal_card_url,
                data:{
                    deal_owner: 'Sally Sue',
                    deal_address: '745 Amen Street',
                    deal_arv: '222',
                    deal_repair: '333',
                    
                    csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
                },
                success:function(){
                    $("#id_stage").val("3").change();
                }
            });

        });
        

FORM DROP-DOWN HTML

<p><label for="id_stage">Stage:</label> <select name="stage" required="" id="id_stage">
  <option value="">---------</option>

  <option value="1" selected="">New</option>

  <option value="2">Sent Offer</option>

  <option value="3">Under Contract</option>

  <option value="4">Option</option>

  <option value="5">Closed</option>

  <option value="24">New Lead</option>

</select></p>

Ajax Updated Deal Update Webpage:

Answer 1

Figured it out. It was actually quite simple...

For the "data" setting in the ajax function I needed to specify the "value" of the desired selector (aka stage), as shown in the code below.

data:{
     deal_owner: 'Sally Sue',
     deal_address: '745 Amen Street',
     deal_arv: '222',
     deal_repair: '333',
     stage: "2",

In this case passing a stage "value" equal to "2", as seen in the html, corresponds to the "Sent Offer" option in the drop-down menu. Previously I tried to use the actual name of the selector (eg. Sent Offer).