如何使用 ajax (codeigniter) 在我的编辑表单中获取并显示所选值到 <select2> 标签
How to fetch and display selected value into <select2> tag in my Edit Form using ajax (codeigniter)
我创建了一个表格,其中包括 select2 control.and 我在数据库中有数据。
现在我想在编辑表单时将特定数据值的值提取到 select2 控件中。我的 selected select 值存储在一个变量中现在我希望该值显示在编辑表单内的 select2 控件中,我不知道如何..
这是我的编辑表单代码:
<div id="editm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update Rayon</h4>
</div>
<div class="modal-body">
<form id="validate1" method="POST">
<div class="form-group">
<label class="control-label">Kode Rayon</label>
<div>
<input type="text" class="form-control" id="edit_Kode_rayon" name="edit_Kode_rayon" placeholder="Kode Rayon" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label">Nama Rayon</label>
<div>
<input type="text" class="form-control" id="edit_nama_rayon" name="edit_nama_rayon" placeholder="Nama Center" >
</div>
</div>
<div class="form-group">
<label class="control-label">Nama Region</label>
<div>
<!-- HERE IS THE SELECT2 THAT IM TALKING ABOUT.. -->
<select class="form-control kode_region" id="nRegionE" name="kode_region" style="width: 100%;">
<option value=""></option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="update" class="btn btn-primary">Update</button>
</div>
</div>
</div>
这里是 jquery 编辑按钮的代码:
$(document).on("click", "#edit", function(e){
e.preventDefault();
var editid = $(this).attr("value");
$.ajax({
url: "<?php echo base_url();?>Rayon/editdata",
type: "POST",
dataType: "json",
data:{editid: editid},
success: function(data){
if(data.responce == "success"){
$('#editm').modal('show');
$("#edit_Kode_rayon").val(data.posts.kode_rayon);
$("#edit_nama_rayon").val(data.posts.nama_rayon);
//$("#nRegionE").val(data.posts.kode_region);<-- I TRIED LIKE THIS .. NOT WORK -->
//$("#nRegionE").select2().select2('val',data.posts.kode_region);<-- I TRIED LIKE THIS . NOT WORK-->
$('#nRegionE').val(data.posts.kode_region).trigger("change");<-- EVEN THIS ONE IS NOT WORK -->
}else{
toastr["error"](data.message);}
}
});
});
这是我的 Select2 脚本,我用它来插入和编辑表单:
$(function () {$('.kode_region').select2({
//placeholder: "Please select region",allowClear: true,
ajax: {
dataType: 'json',
url: '<?=site_url('Bonus/nregion')?>',
type: "post",
delay: 250,
data: function(params) {
return {search: params.term}},
processResults: function (data, page) {
return {results: data};
},
}
})});
为了清楚起见,我截取了我的编辑表单的屏幕截图:
我想要的只是将数据值提取到编辑表单的 select2 表单控件中。任何人都可以帮助我做到这一点吗? n 我会非常感激。
您正在 data.posts.kode_region 中正确获取选项列表,
然后更新这一行
$("#nRegionE").val(data.posts.kode_region);
至此
$("#nRegionE").html('<option value = "'+data.posts.kode_region+'" selected >'+data.posts.kode_region+'</option>');
别忘了评论这一行
$('#nRegionE').val(data.posts.kode_region).trigger("change");
我敢肯定这对你有用
$("select#nRegionE option").val("hello"); //Change hello string to your record Id
$("select#nRegionE option").html(data.posts.kode_region);
我创建了一个表格,其中包括 select2 control.and 我在数据库中有数据。
现在我想在编辑表单时将特定数据值的值提取到 select2 控件中。我的 selected select 值存储在一个变量中现在我希望该值显示在编辑表单内的 select2 控件中,我不知道如何..
这是我的编辑表单代码:
<div id="editm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update Rayon</h4>
</div>
<div class="modal-body">
<form id="validate1" method="POST">
<div class="form-group">
<label class="control-label">Kode Rayon</label>
<div>
<input type="text" class="form-control" id="edit_Kode_rayon" name="edit_Kode_rayon" placeholder="Kode Rayon" readonly>
</div>
</div>
<div class="form-group">
<label class="control-label">Nama Rayon</label>
<div>
<input type="text" class="form-control" id="edit_nama_rayon" name="edit_nama_rayon" placeholder="Nama Center" >
</div>
</div>
<div class="form-group">
<label class="control-label">Nama Region</label>
<div>
<!-- HERE IS THE SELECT2 THAT IM TALKING ABOUT.. -->
<select class="form-control kode_region" id="nRegionE" name="kode_region" style="width: 100%;">
<option value=""></option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="update" class="btn btn-primary">Update</button>
</div>
</div>
</div>
这里是 jquery 编辑按钮的代码:
$(document).on("click", "#edit", function(e){
e.preventDefault();
var editid = $(this).attr("value");
$.ajax({
url: "<?php echo base_url();?>Rayon/editdata",
type: "POST",
dataType: "json",
data:{editid: editid},
success: function(data){
if(data.responce == "success"){
$('#editm').modal('show');
$("#edit_Kode_rayon").val(data.posts.kode_rayon);
$("#edit_nama_rayon").val(data.posts.nama_rayon);
//$("#nRegionE").val(data.posts.kode_region);<-- I TRIED LIKE THIS .. NOT WORK -->
//$("#nRegionE").select2().select2('val',data.posts.kode_region);<-- I TRIED LIKE THIS . NOT WORK-->
$('#nRegionE').val(data.posts.kode_region).trigger("change");<-- EVEN THIS ONE IS NOT WORK -->
}else{
toastr["error"](data.message);}
}
});
});
这是我的 Select2 脚本,我用它来插入和编辑表单:
$(function () {$('.kode_region').select2({
//placeholder: "Please select region",allowClear: true,
ajax: {
dataType: 'json',
url: '<?=site_url('Bonus/nregion')?>',
type: "post",
delay: 250,
data: function(params) {
return {search: params.term}},
processResults: function (data, page) {
return {results: data};
},
}
})});
为了清楚起见,我截取了我的编辑表单的屏幕截图:
我想要的只是将数据值提取到编辑表单的 select2 表单控件中。任何人都可以帮助我做到这一点吗? n 我会非常感激。
您正在 data.posts.kode_region 中正确获取选项列表, 然后更新这一行
$("#nRegionE").val(data.posts.kode_region);
至此
$("#nRegionE").html('<option value = "'+data.posts.kode_region+'" selected >'+data.posts.kode_region+'</option>');
别忘了评论这一行
$('#nRegionE').val(data.posts.kode_region).trigger("change");
我敢肯定这对你有用
$("select#nRegionE option").val("hello"); //Change hello string to your record Id
$("select#nRegionE option").html(data.posts.kode_region);