在编辑数据时,我的 select2 有一个小问题,select2 不会选择该值 这是我的数据显示表数据
当我单击“编辑数据”按钮时,它应该在父值上选择“设置”,但它不起作用,请参阅此
模态脚本
<div class="modal fade" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mt-0">Edit Data Navigation</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="token" value="{{ csrf_token() }}">
<input type="hidden" id="nav_id">
<div class="form-group">
<label>Nama Menu</label>
<input type="text" name="name" class="form-control name" id="name"
placeholder="Type something" />
<div class="alert alert-danger mt-2 d-none" role="alert" id="alert-name"></div>
</div>
<div class="form-group">
<label>URL</label>
<input type="text" name="url" class="form-control url" id="url"
placeholder="Type something" />
<div class="alert alert-danger mt-2 d-none" role="alert" id="alert-url"></div>
</div>
<div class="form-group">
<label>Icon</label>
<input type="text" name="icon" class="form-control icon" id="icon"
placeholder="Type something" />
<div class="alert alert-danger mt-2 d-none" role="alert" id="alert-icon"></div>
</div>
<div class="form-group">
<label>Parent</label>
<select id="parent_id" class="form-control parent_id">
<option value=""></option>
</select>
<div class="alert alert-danger mt-2 d-none" role="alert" id="alert-parent"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">TUTUP</button>
<button type="button" class="btn btn-primary" id="update">SIMPAN</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
这是我的ajax脚本
Ajax 脚本
// select2 data parents
$(document).ready(function() {
var _token = $('meta[name="csrf-token"]').attr('content');
var parentSelect = $('.parent_id');
$(".parent_id").select2({
dropdownParent: $('#modal-edit'),
placeholder: 'Choose Parent',
ajax: {
url: "{{ route('getNavigations') }}",
type: "get",
dataType: 'json',
delay: 250,
data: function(params) {
return {
token: _token,
search: params.term // search term
};
},
processResults: function(response) {
return {
results: response
};
},
cache: true
}
});
});
单击编辑按钮时获取数据我通常使用触发器来设置 select2 的选定值,但它不起作用
获取数据
$('body').on('click', '#btn-edit-post', function() {
var nav_id = $(this).data('id');
//fetch detail post with ajax
$.ajax({
url: `navigations/${nav_id}`,
type: "GET",
cache: false,
success: function(response) {
// console.log(response);
//fill data to form
$('#nav_id').val(response.data.id);
$('.name').val(response.data.name);
$('.url').val(response.data.url);
$('.icon').val(response.data.icon);
$('.parent_id').val(response.data.parent_id).trigger('change');
//open modal
$('#modal-edit').modal('show');
}
});
});
这是我的控制器
控制器
public function getNavigations(Request $request)
{
$search = $request->search;
if ($search == '') {
$navigation = Navigation::orderby('name', 'asc')->select('id', 'name', 'parent_id')->where('parent_id')->limit(5)->get();
} else {
$navigation = Navigation::orderby('name', 'asc')->select('id', 'name', 'parent_id')->where('name', 'like', '%' . $search . '%')->limit(5)->get();
}
// create respons
$response = array();
foreach ($navigation as $parent) {
$response[] = array(
"id" => $parent->id,
"text" => $parent->name,
);
}
// dd($response);
return response()->json($response);
}
数据显示但未选中,应该是这样的
我不知道我编写代码的方式是否正确,我是代码新手,所以请帮助我:)
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
所以我找到了我创建的代码的解决方案。我在控制器和我的JavaScript脚本中添加了一些代码。以下是我添加的代码:
在控制器中,为了获取数据,我添加了以下代码:
// 获取所有父导航项(不包括当前导航项) $parentItems = Navigation::where('id', '!=', $id)->get(['id', 'name']);这是代码的完成部分 点击这里查看
至于JavaScript,我对select2的返回值进行了一些更改,如下所示:
/// 根据parent_id获取父项的名称 var parentName = ''; var parentItem = response.parent_items.find(function(item) { return item.id === response.data.parent_id; }); if (parentItem) { parentName = parentItem.name; } var newOption = new Option(parentName, response.data.parent_id, true, true); $(".parent_id").append(newOption).trigger('change');这是代码的完成部分 点击这里查看