使用 laravel / ajax 显示依赖选择框的值

Question

我正在尝试编辑数据，所以我以表格形式显示数据以更新它。

所以我有以下代码：

<!-- Script fot getting the sstates of a country-->


  $(document).ready(function() {

    $("#pays").change(function() {
      /* let country_id = this.value;*/
      let country_id = $(this).find("option:selected").data("id");
      $.get('/getState/' + country_id, function(data) {
        $("#ville").html(data);
      });
    });
  });

<!-- Script for edit data-->

$(document).on('click', '.edit', function() {

  var id = $(this).attr('id');
  console.log(id);
  $('#form_result').html('');

  $.ajax({

    url: "castingss/" + id + "/edit",
    dataType: "json",
    type: "GET",
    success: function(html) {
      console.log(html);

      $('#pays').val(html.data.pays);
      $('#pays').trigger('change');
      $('#ville').val(html.data.ville);
      $("#ville").trigger('change');


    }
  });
});

<div class="form-row">
  <div class="col-sm-6">
    <label>Pays</label>
    <select class="form-control select2-single" data-width="100%" name="pays" id="pays">
      <option label="&nbsp;">&nbsp;</option>
      @foreach($countries as $country)
      <option data-id="{{$country->id}}" value="{{$country->name}}">{{$country->name}}</option>
      @endforeach
    </select>
  </div>
  <div class="col-sm-6">
    <label>Ville</label>
    <select class="form-control select2-single" data-width="100%" name="ville" id="ville">

    </select>
  </div>
</div>

但我得到以下结果：

只有pays的值为selected，但ville的值没有被选中。

当我做 console.log(html) 时，我成功地获得了 ville 的价值，但没有显示在表单上。

我的代码有什么问题，如果您有任何想法请帮忙。

编辑

Console.log(html)

{data: {…}}
  data: 
    pays: "Algeria",
    ville: "Adrar"
      [[Prototype]]: Object[[Prototype]]: Object

控制器

public function getAllStates()

    {
        $country_id = request('country');

        $states = State::where('country_id',$country_id)->get();

       /* dd($states);*/
    
        $option = "<option value = ''> Select State</option>";


        foreach($states as $state){
            $option.= '<option value = "'.$state->name.'">'.$state->name.'</option>';
        }
        return $option;
    }

Answer 1

你可以试试这个。我像下面这样使用

var villeTag = $('#ville');

$('#ville').val(html.data.ville);
villeTag.append(html.data.ville).trigger('change');

Please Follow this link