如何使用 ajax (codeigniter) 在我的编辑表单中获取和显示选定值到 <select2> 标记中

Posted 2023-05-07

【中文标题】如何使用 ajax (codeigniter) 在我的编辑表单中获取和显示选定值到 <select2> 标记中

【英文标题】：How to fetch and display selected value into <select2> tag in my Edit Form using ajax (codeigniter)

【发布时间】：2021-09-29 11:47:04

【问题描述】：

我创建了一个包含 select2 控件的表单。我在数据库中有数据。

现在我想在编辑表单时将特定数据值的值提取到 select2 控件中。我选择的选择值存储在一个变量中现在我希望该值显示在编辑表单内的 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">&times;</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 表单控件中。任何人都可以帮我这样做吗？我会很感激的。

【参考方案1】：

您在 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");

【讨论】：

我按照你的要求做了。 $("#nRegionE").html(data.posts.kode_region);但这对我不起作用..你认为我必须为编辑表单制作另一个 select2 脚本吗？因为 select2 脚本现在用于插入和编辑表单。两者都有 select2 选项.. 亲爱的，我真的很抱歉再次上线 N 尝试您的解决方案。并感谢您的回复

尝试 console.log(data) 并将数据打印给我，我认为您需要先解析 json 数据才能使所有数据正常工作

这里是 console.log(data) : "responce":"success","posts":"kode_rayon":"RAYONBDG ","nama_rayon":"Rayon Bandung ","kode_region":"REGIONJABAR " ..... 这里是 console.log(data.posts) : kode_rayon: "RAYONBDG ", nama_rayon: "Rayon Bandung ", kode_region: "REGIONJABAR " ..

需要先解析json数据 var data = $.parseJSON(data);我也编辑了我的答案

查看更新后的答案，需要用 html 选项标签替换下拉值，并且不需要 parseJson 数据，因为您已经在那里获取值

【参考方案2】：

我相信这对你有用

$("select#nRegionE option").val("hello"); //Change hello string to your record Id
$("select#nRegionE option").html(data.posts.kode_region);

【讨论】：

你的意思是这样的：$("select#nRegionE option").val(data.posts.kode_region); $("select#nRegionE 选项").html(data.posts.kode_region);如果那是你的意思它仍然没有改变兄弟:( ..