Как извлечь и отобразить выбранное значение в теге в моей форме редактирования с помощью ajax (codeigniter)

#javascript #php #jquery #codeigniter #jquery-select2

Вопрос:

Я создаю одну форму, которая включает элемент управления select2.и у меня есть данные в базе данных.

Теперь я хочу получить значение определенного значения данных в элементе управления select2 при редактировании формы. Мое выбранное значение 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">amp;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, который я использую для inssert, и моя форма редактирования:

 $(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");
 

Комментарии:

1. я сделал то, о чем ты меня просишь . $(«#nRegionE»).html(data.posts.kode_region); но это не работает для меня .. вы думаете, что мне нужно сделать еще один скрипт select2 для формы редактирования ? потому что сценарий select2 теперь предназначен для вставки и редактирования формы . в обоих из них была опция select2 .. МНЕ ОЧЕНЬ ЖАЛЬ, ЧТО Я ОПОЗДАЛ СНОВА ВЫЙТИ В ИНТЕРНЕТ И ПОПРОБУЮ ТВОЕ РЕШЕНИЕ, МОЯ ДОРОГАЯ . и спасибо за ваш ответ

2. попробуйте console.log(данные) и распечатайте мне данные, которые вы там получаете, и я думаю, что вам сначала нужно проанализировать данные json, чтобы все данные работали

3. здесь я console.log(данные) : {"responce":"success","posts":{"kode_rayon":"RAYONBDG ","nama_rayon":"Rayon Bandung ","kode_region":"REGIONJABAR "}} ….. и здесь я console.log(данные.сообщения) : {kode_rayon: "RAYONBDG ", nama_rayon: "Rayon Bandung ", kode_region: "REGIONJABAR "} ..

4. вам нужно сначала проанализировать данные json var data = $.parseJSON(данные); Я также отредактировал свой ответ

5. смотрите обновленный ответ, необходимо заменить значение выпадающего списка тегом опции html и нет необходимости анализировать данные JSON, потому что вы уже получаете значения там

Ответ №2:

Я чертовски уверен, что это сработает для вас

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

Комментарии:

1. вы имеете в виду следующее : $(«выберите опцию#nRegionE»).val(data.posts.kode_region); $(«выберите опцию#nRegionE»).html(data.posts.kode_region); если это то, что вы имеете в виду, все равно ничего не изменилось, брат 🙁 ..