更新的相关下拉列表默认加载Laravel中的所有状态

在我的Laravel-5.8中，我使用了国家和相应州的依赖下拉列表。对于创建视图刀片，我有以下内容：

控制器

public function getStateList(Request $request)
{
    $states = DB::table("config_states")
                ->where("country_id",$request->country_id)
                ->pluck("state_name","id")
                ->sortByDesc('state_name');
    return response()->json($states);
}

public function edit($id)
{
    $userCompany = Auth::user()->company_id;

    $employee = HrEmployee::where('id', $id)->first();   
    $countries          =       ConfigCountries::all();
    $states             =       ConfigState::all();

    return view('hr.employees.edit')
            ->with('employee', $employee)
            ->with('countries', $countries)
            ->with('states', $states);
}

创建新刀片

          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> Country:</label>
              <select id="country" class="form-control select2bs4" data-placeholder="Choose Country" tabindex="1" name="country_id" style="width: 100%;">
                <option value="" selected disabled>Select Country</option>
                   @if($countries->count() > 0 )
                     @foreach($countries as $country)
                       <option value="{{$country->id}}">{{$country->country_name}}</option>
                     @endforeach
                   @endif
              </select>
            </div>
            <!-- /.form-group -->
          </div>

            
          <!-- /.col -->
          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> State:</label>
              <select id="state" class="form-control select2bs4" data-placeholder="Choose State" tabindex="1" name="state_id" style="width: 100%;">
              </select>
            </div>
            <!-- /.form-group -->
          </div>

Javascript

<script type="text/javascript">
    $('#country').change(function(){
    var countryID = $(this).val();    
    if(countryID){
        $.ajax({
           type:"GET",
           url:"{{url('get-state-list')}}?country_id="+countryID,
           success:function(res){               
            if(res){
                $("#state").empty();
                $("#state").append('<option>Select</option>');
                $.each(res,function(key,value){
                    $("#state").append('<option value="'+key+'">'+value+'</option>');
                });
           
            }else{
               $("#state").empty();
            }
           }
        });
    }else{
        $("#state").empty();
    }      
   });
        

   });
</script>

<script type="text/javascript">
    $('#country').change(function(){
    var countryID = $(this).val();    
    if(countryID){
        $.ajax({
           type:"GET",
           url:"{{url('get-state-list')}}?country_id="+countryID,
           success:function(res){               
            if(res){
                $("#state").empty();
                $("#state").append('<option>Select</option>');
                $.each(res,function(key,value){
                    $("#state").append('<option value="'+key+'">'+value+'</option>');
                });
           
            }else{
               $("#state").empty();
            }
           }
        });
    }else{
        $("#state").empty();
    }      
   });
        

   });
</script>

这很有效

但是，对于“编辑视图”刀片：

        <div class="row">
          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> Country:</label>
              <select id="country" class="form-control select2bs4" data-placeholder="Choose Country" tabindex="1" name="country_id" style="width: 100%;">
                <option value="" selected disabled>Select Country</option>
                   @if($countries->count() > 0 )
                     @foreach($countries as $country)
                       <option value="{{$country->id}}" @if($country->id == $employee->country_id) selected @endif>{{$country->country_name}}</option>
                     @endforeach
                   @endif
              </select>
            </div>
            <!-- /.form-group -->
          </div>

            
          <!-- /.col -->
          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> State:</label>
              <select id="state" class="form-control select2bs4" data-placeholder="Choose State" tabindex="1" name="state_id" style="width: 100%;">
              </select>
            </div>
            <!-- /.form-group -->
          </div>

Javascript

<script type="text/javascript">
    $('#country').change(function(){
    var countryID = $(this).val();    
    if(countryID){
        $.ajax({
           type:"GET",
           url:"{{url('get-state-list')}}?country_id="+countryID,
           success:function(res){               
            if(res){
                $("#state").empty();
                $("#state").append('<option>Select</option>');
                $.each(res,function(key,value){
                    $("#state").append('<option value="'+key+'">'+value+'</option>');
                });
           
            }else{
               $("#state").empty();
            }
           }
        });
    }else{
        $("#state").empty();
    }      
   });
        

   });
</script>

<script type="text/javascript">
    $('#country').change(function(){
    var countryID = $(this).val();    
    if(countryID){
        $.ajax({
           type:"GET",
           url:"{{url('get-state-list')}}?country_id="+countryID,
           success:function(res){               
            if(res){
                $("#state").empty();
                $("#state").append('<option>Select</option>');
                $.each(res,function(key,value){
                    $("#state").append('<option value="'+key+'">'+value+'</option>');
                });
           
            }else{
               $("#state").empty();
            }
           }
        });
    }else{
        $("#state").empty();
    }      
   });
        

   });
</script>

我希望它在默认情况下将当前的源状态从数据库加载到selectid=state下拉列表中，但它是空的

然后当我把它改成：

          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> State:</label>
              <select id="state" class="form-control select2bs4" data-placeholder="Choose State" tabindex="1" name="state_id" style="width: 100%;">
                <option value="" selected disabled>Select state</option>
                   @if($states->count() > 0 )
                     @foreach($states as $state)
                       <option value="{{$state->id}}" @if($state->id == $employee->state_id) selected @endif>{{$cstate->state_name}}</option>
                     @endforeach
                   @endif
              </select>
            </div>
            <!-- /.form-group -->
          </div>

它加载数据库中的所有原始状态，而不是相应的状态

我如何解决这个问题

---

谢谢

正如我在评论中所说的，你在选择州的时候忽略了这个国家的情况

public function edit($id)
{
    $userCompany = Auth::user()->company_id;

    $employee = HrEmployee::where('id', $id)->first();   
    $countries = ConfigCountries::all();
    $states = ConfigState::where("country_id", $employee->country_id)->get();

    return view('hr.employees.edit')
            ->with('employee', $employee)
            ->with('countries', $countries)
            ->with('states', $states);
}

---

更改所选国家/地区时是否填充状态选择？由于您仅在触发更改事件时填充州。@ClémentBaconnier-是，当您更改所选国家时填充州。但我要说的是，对于编辑视图刀片，由于它在使用id进行更改之前将国家名称加载到数据库的select下拉列表中，因此它也应该对国家名称执行同样的操作。这不会发生您可以在编辑版本中添加填充$states的控制器代码吗？你基本上只是缺少了库里的身份证。您还可以在加载页面后强制触发javascript中的事件更改，并保留与创建页面相同的代码，以更新控制器代码。我试过你刚才给我的密码。但它仍然不能解决问题。我想说的是，当呈现编辑页面时，如果国家名称是加纳，州名称是阿克拉，它应该将其作为选择选项的值加载。这不需要改变。它应该首先根据id显示数据库中的内容。然后，我们可以应用onchange。谢谢请协助