提交更新后 select2 的 select 选项丢失以及如何从数据库设置 selected 值
select option of select2 was missing after submit the update and how to set the selected value from database
我在使用 select2 时遇到了几个问题。首先,当我单击编辑按钮显示编辑模式时,select2 的 select 选项不显示数据库中的值。
这是编辑模式:
代码如下:
<script>
// Edit
$('body').on('click', '.edit', function (event) {
event.preventDefault();
let id = $(this).attr('id');
$.get('/admin/diklat/diklats/' + id + '/edit', function (data) {
$('#code').val(data.data.code);
$('#name').val(data.data.name);
$('#lesson_hour').val(data.data.lesson_hour);
$('#department_id').val(data.data.department_id);
$('#schema_code').val(data.data.schema_code);
$('#committee').html('');
for (let index = 0; index < data.committee.length; index++) {
$('#committee').append(`<option selected value="${data.committee[index]}">${data.committee[index]}</option>`)
}
$('#id').val(data.data.id);
$('#start_date').val(data.data.start_date);
$('#end_date').val(data.data.end_date);
$('#location').val(data.data.location);
$('#regency_id').val(data.data.regency_id); // this is the part that cannot show its value
$('#modal-diklat').modal('show');
})
});
</script>
<div class="row">
<div class="col">
<div class="form-group">
<label class="form-label" for="regency_id">Kabupaten</label>
<select id="regency_id" name="regency_id" class="select2 form-control">
<option value=""></option>
@foreach ($regencys as $regency)
<option value="{{$regency->id}}">{{$regency->name}}</option>
@endforeach
</select>
</div>
</div>
</div>
第二个问题是,当我点击更新按钮时,select2 的 select 选项丢失了。
此处:
当更新过程完成后(我想在不重新加载页面的情况下再添加一个数据),它仍然像上图所示那样丢失。但是,当我重新加载页面时,
它像正常一样重新出现。
有人可以帮我解决这个问题吗?我一直在寻找解决方案,但不幸的是我仍然无法解决
已解决。对于第一个问题,只需要定义类似
的东西
$('select').select2();
而第二期只需添加.trigger("change");
示例:
$('#regency_id').val(data.data.regency_id).trigger('change');
注意:OP 在问题部分提供答案。
我在使用 select2 时遇到了几个问题。首先,当我单击编辑按钮显示编辑模式时,select2 的 select 选项不显示数据库中的值。
这是编辑模式:
代码如下:
<script>
// Edit
$('body').on('click', '.edit', function (event) {
event.preventDefault();
let id = $(this).attr('id');
$.get('/admin/diklat/diklats/' + id + '/edit', function (data) {
$('#code').val(data.data.code);
$('#name').val(data.data.name);
$('#lesson_hour').val(data.data.lesson_hour);
$('#department_id').val(data.data.department_id);
$('#schema_code').val(data.data.schema_code);
$('#committee').html('');
for (let index = 0; index < data.committee.length; index++) {
$('#committee').append(`<option selected value="${data.committee[index]}">${data.committee[index]}</option>`)
}
$('#id').val(data.data.id);
$('#start_date').val(data.data.start_date);
$('#end_date').val(data.data.end_date);
$('#location').val(data.data.location);
$('#regency_id').val(data.data.regency_id); // this is the part that cannot show its value
$('#modal-diklat').modal('show');
})
});
</script>
<div class="row">
<div class="col">
<div class="form-group">
<label class="form-label" for="regency_id">Kabupaten</label>
<select id="regency_id" name="regency_id" class="select2 form-control">
<option value=""></option>
@foreach ($regencys as $regency)
<option value="{{$regency->id}}">{{$regency->name}}</option>
@endforeach
</select>
</div>
</div>
</div>
第二个问题是,当我点击更新按钮时,select2 的 select 选项丢失了。
此处:
当更新过程完成后(我想在不重新加载页面的情况下再添加一个数据),它仍然像上图所示那样丢失。但是,当我重新加载页面时, 它像正常一样重新出现。
有人可以帮我解决这个问题吗?我一直在寻找解决方案,但不幸的是我仍然无法解决
已解决。对于第一个问题,只需要定义类似
的东西$('select').select2();
而第二期只需添加.trigger("change");
示例:
$('#regency_id').val(data.data.regency_id).trigger('change');
注意:OP 在问题部分提供答案。