重新加載特定的Selection標簽，而無需重新加載整個頁面

Question

我正在嘗試在數據庫中添加新客戶端的過程中創建表單頁面。 該表格由一個選擇標記組成，該選擇標記具有添加門牌號的選項。 但是在某些情況下，例如房屋編號尚未存儲在數據庫中，因此我決定創建一個按鈕來添加新房屋編號（使用模態）。

形成：

<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>

用於添加新門牌號的腳本，並在成功添加新門牌號后刷新選擇：

$('#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')
        })

該功能成功完成后，唯一的問題是選擇的分割變形了。 我也忘了說我重新加載了div，但是我想知道是否可以重新加載選擇。 我不確定如何執行此操作。 期待您的幫助。 非常感謝你！

Answer 1

您是否正在使用select2（ https://select2.org/ ）？

如果是這樣，則可以使用程序控制選擇的功能。

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

通過使用：

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

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

您可以在ajax響應中返回該選項並填充選擇。

Answer 2

您只需要在insert.php文件中回顯數據的json格式，然后將js腳本修改為

    $.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>');
        });
    }
});

祝好運。

編輯1：添加源。

選中使用Javason / Jquery和Json數據單擊時填充“填充選擇”框選項