重新加载特定的选择标签而不重新加载整个页面答案

【问题标题】：Reload specific Selection tag without reloading the whole page重新加载特定的选择标签而不重新加载整个页面
【发布时间】：2018-11-30 09:59:05
【问题描述】：

我正在尝试在数据库中添加新客户端时制作表单页面。该表单由一个选择标签组成，该标签具有添加门牌号的选项。但是有一些情况，比如门牌号还没有放在数据库中，所以我决定创建一个按钮来添加新的门牌号（使用模态）。

表格：

<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，但我想知道是否可以重新加载选择。我不确定如何执行此操作。期待您的帮助。非常感谢！

【问题讨论】：

在处理ajax请求并将其作为响应发送的PHP文件中准备您需要在页面上更新的HTML。然后在您的特定部分中通过 js 在您的页面上设置 HTML 响应。 stackoverflow.com/a/18064824/5962966 sitepoint.com/auto-refresh-div-content-jquery-ajax希望对您有所帮助。

标签： javascript php jquery json

【解决方案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 响应中返回选项并填充选择。

【讨论】：

【解决方案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：添加源代码。

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

【讨论】：