javascript - 重新加载特定的选择标签而不重新加载整个页面
问题描述
我正在尝试在数据库中添加新客户端时制作表单页面。该表单由一个选择标签组成,该标签具有添加门牌号的选项。但是有些情况,比如门牌号还没有放在数据库中,所以我决定创建一个按钮来添加新的门牌号(使用模态)。
形式:
<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,但我想知道是否可以重新加载选择。我不确定如何执行此操作。期待您的帮助。非常感谢!
解决方案
您在使用 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 响应中返回选项并填充选择。
推荐阅读
- c++ - 程序给出数组中第一次出现在最低索引上的重复数字的索引
- javascript - 如何从搜索输入中搜索页面中的特定数据并选择 Javascript 中复选框的所有搜索数据
- laravel - Laravel 仅拒绝 IP 访问
- laravel - Laravel 插入默认值而不是通过请求发送的数据
- c# - 主机游戏 c# 的项目
- electron - 如何在 Electron 中为代理设置用户名和密码
- python - Django Model not recognising model fields using Serialiser Class Generic Views
- haskell - 即使定义了类型,IHP 中的 BadType 路由失败
- flutter - 使用 clear 方法时安全的小部件列表
- safari - iOS 15 上的 Safari 内嵌视频播放问题