what is the best jsript event handler to use when data is change through other script for select?

Question

I am trying to make, the value for the value media and unit media, change when the object is select, yes the object do change when I change upon the available item to select, but my target is to change when the item is selected by the jquery. Not by the user Here is my part for the php

<div class="col-md-6 col-12">  
<div class="mb-1">
    <label class="form-label" >Substance Use</label>
    <fieldset>
    <div class="input-group body-item">
        <select class="form-select" id="itemName" name="itemName" required>
        <option value="">Select activity number first</option>
        </select>
        
        <input type="text" class="form-control"  name="value_media" placeholder=Input amount use" aria-label="Amount"/>
        <select class="form-select" id="basicSelect" name="unit_media" required>
        <option value="0">Select unit</option>
        <option value="2">g</option>
        <option value="3">ml</option>
        <option value="7">unit</option>
        <option value="13">Poly</option>
        <option value="14">Set</option>
        </select>
    </div>
</fieldset>
</div>
</div>   
                                                                                         
                                                        

This will be my function, I try to used oninput and onchange but the result is same, the script will only execute if I select item, not change from the previous script.

 $(document).on('input', '[name="itemName"]', function(){
        var itemID = $(this).val();
        var activity = $('#activity').val();
        var seasonID = $('#seasonID').val();
         
       console.log(activity);

        if(itemID){
            $.ajax({
                context: this,
                type:'POST',
                url:'?syspath=ajax&controller=ajax&action=getActItemDose',
                data: { 'itemId': itemID, 'itemType': activity, 'seasonID': seasonID  },
                
                success:function(data){
                    
                    var object = JSON.parse(data);
                    var value = object.itemValue;
                    var unit = object.itemUnit;
                   

                    $(this).parents('.body-item').find('[name="value_media"]').val(value);
                    $(this).parents('.body-item').find('[name="unit_media"]').val(unit);     
                }
            });            
            
        }else{
            $(this).parents('.body-item').find('[name="value_media"]').val(0);
            $(this).parents('.body-item').find('[name="unit_media"]').val();
           
  
        }
    });

below code is the one that execute before the previous script where make option in html

$('#activityNum').on('change', function(){
        var itemNumID = $('#activityNum').val();
        var actID = $('#activity').val();
        var sraID = $('#sraID').val();
        var seasonID = $('#seasonID').val();
        if(itemNumID){
            $.ajax({type:'POST',
                url:'?syspath=ajax&controller=ajax&action=getActNumSRA',
                data: { 'activitiyNum': itemNumID, 'sraID': sraID, 'seasonID':seasonID,'DetAct': actID },
                
                success:function(html){
                    
                        $('#itemName').html(html);
        
                }
            });
        }else{
            ('#itemName').html('<option value="">Select Activity number first</option>'); 
        }
    });

In this part html is equivalent to echo 'None';