当我单击编辑按钮时，如何使用 Ajax 编辑下拉列表或选择选项列表？

Posted 2023-05-09

【中文标题】当我单击编辑按钮时，如何使用 Ajax 编辑下拉列表或选择选项列表？

【英文标题】：How can I edit dropdown or Select option list using Ajax when I click on edit button?

【发布时间】：2021-11-10 04:08:12

【问题描述】：

我正在使用 Laravel-8。我想编辑我的下拉列表。当我单击编辑按钮时，我无法使用 Ajax 将特定值设置到下拉/选择选项字段中。请帮帮我。

我的下拉代码：

<div class="ibox-content">
   <input type="hidden" id="area_id">
   <div class="form-group row">
      <label class="col-lg-3 col-form-label">Select City</label>
      <div class="col-lg-9">

      <select class="form-control" id="selectCity">
          <option value="0" selected disabled>--- Select City ---</option>
          @foreach ($cities as $city)
          <option value=" $city->id "> $city->city_name </option>
          @endforeach
       </select>
     </div> 
    </div>
    <div class="form-group row">
    <label class="col-lg-3 col-form-label">Add Area</label>
       <div class="col-lg-9">
          <input type="text" id="areaName" placeholder="Enter Area Name" class="form-control">
        </div>
       </div>

<div>
   <button class="btn btn-sm btn-primary btn-outline float-right m-t-n-xs" id="updateArea" type="submit">Update Area</button>
   <label> </label>
   </div>
 </div>

我有一个编辑按钮，代码如下。这很好用。

成功：函数（响应） $('#areaTable tbody').html('');

$.each(response.areas, function(key, item) 
   i++;
   $('#areaTable tbody').append(
    '<tr class="grade"><td>' + i + '</td><td>' + item.city_name + '</td><td>' + item.area_name +'</td><td><button class="btn btn-sm btn-primary btn-outline" type="submit" value="' +item.id +'" id="edit_area"><i class="fa fa-edit"></i></button>&nbsp;&nbsp;<button data-toggle="modal" data-target="#cityModal" class="btn btn-sm btn-danger btn-outline" id="btn-delete-area" type="submit" value="' +item.id + '"><i class="fa fa-trash"></i></button></td></tr>');
      );
   

这是我的 Ajax 代码：

// Edit Area from Database
            $(document).on('click', '#edit_area', function(e) 
                e.preventDefault();
                var area_id = $(this).val();
                // console.log(area_id);
                $.ajax(
                    type: "GET",
                    url: "/edit-area/" + area_id,
                    success: function(response) 
                        if (response.status == 400) 
                            //some staff goes here
                         else 
                            $('#area_id').val(area_id);
                            $('#areaName').val(response.area[0].area_name);
                            $('#selectCity').val(response.area[0].city_name); //this is not works for me
                        
                    
                );
            );

【问题讨论】：

你的下拉区域在哪里，我们不能只用ajax代码解决问题。

抱歉代码不完整。我给出了我的完整代码。谢谢

你可以试试我贴的答案。

【参考方案1】：

你可以这样做：

editFunction(id)
           e.preventDefault();
           $('#selectCity').editableSelect();
           $('#addArea').hide();
           $('#updateArea').show();
           var area_id = id;
           // console.log(area_id);
           $.ajax(
               type: "GET",
               url: "/edit-area/" + area_id,
               success: function(response) 
                   if (response.status == 400) 
                       //some staff goes here
                    else 
                       // alert(response.area[0].city_name);
                       $('#area_id').val(area_id);
                       $('#areaName').val(response.area[0].area_name);
                       $('#selectCity').val(response.area[0].city_name);
                   
               
           );

<button onclick="editFunction('+ item.id +')">Edit Area</button>