重新加载特定的选择标记，而无需重新加载整个页面

I am trying to make a form page in adding new client in a database. The form consist of a selection tag that has options for adding house number. But there are circumstances like house number is not yet placed on the database, so I decided to create a button for adding new house no (using modals).

Form:

<div class="col-md-3 form-group" id="autoload">      
<label>
  Household: <a data-toggle="modal" data-target="#addHousehold" 
  style="cursor: pointer; text-decoration: none;">
  <i class="fa fa-plus" >Add</i></a>
</label>

<select class="form-control select2" style="width: 100%;">
    <option selected="selected">Select Household</option>
      <?php foreach($result3 as $row): ?>
    <option><?=$row['house_no']?></option>
      <?php endforeach ?>

</select>

</div>

Script for adding new house number, and refresh the selection when new house number is successfully added:

$('#addHouseholder').click(function(){
        var householder = $('.householder').val()
        var street = $('.strsel1').val();

        $.ajax({
          method: "POST",
          url: "insert.php",
          data: {householder:householder,street1:street}
        }).then(()=>{

            $("#autoload").load(" #autoload");
            alert('Household Added')
        })

This function successfully, the only problem is the division of the selection is deformed. I also forgot to say that I reload the div, but I wonder if it is possible to just reload the selection. I am not sure how to execute this. Looking forward for your help. Thank you very much!

Are you using select2 (https://select2.org/)?

If so, you can use the ability to programmatic control the select.

https://select2.org/programmatic-control/add-select-clear-items

By using:

var data = {
    id: 1,
    text: 'Barn owl'
};

var newOption = new Option(data.text, data.id, false, false);
$('#mySelect2').append(newOption).trigger('change');

You could return the option in the ajax response and populate the select.

You just need to echo json format of your data in insert.php file then modify your js script to

    $.ajax({
    type: "POST",
    url: "path/insert.php",
    data: {householder:householder,street1:street},
    success: function(data){
        // Parse the returned json data
        var opts = $.parseJSON(data);
        // Use jQuery's each to iterate over the opts value
        $.each(opts, function(i, d) {
            // You will need to alter the below to get the right values from your json object.  Guessing that d.no / d.anyOtherInfo are columns in your data
            $('#autoload').children(".orm-control.select2").append('<option value="' + d.no + '">' + d.anyOtherInfo + '</option>');
        });
    }
});

Good luck.

Edit 1: adding source.

check Populate Select box options on click with Javascript/Jquery with Json data