Блог

Я использую 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>
 

У меня есть кнопка редактирования, код которой приведен ниже. Это прекрасно работает.

успех: функция(ответ) { $(‘#допустимое тело’).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>amp;nbsp;amp;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
                        }
                    }
                });
            });
 

Вы можете сделать это таким образом:

 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>