在ajax成功的选择框中显示状态，并在下拉列表中显示其他状态

Question

你好，我正在显示ajax成功函数后的状态名称和状态id，但我不显示，因为我不知道我该如何显示?之后，我还显示了州名下面的州列表。需要帮助解决这个查询

public function edit_address(Request $request)
    {
         $state = DB::table('states')->pluck('state_name','state_id');   
        $each_edit_address=DB::table('address')
                    ->join('states','states.state_id','=','address.state_id')
                    ->select('address.*','states.state_name')
                    ->where('address_id',$request->address_id)
                    ->get();
         foreach ($each_edit_address as $edit_address) 
         {
            return response()->json(['address_id' => $edit_address->address_id,'address' =>$edit_address->address,'pincode'=>$edit_address->pincode,'locality'=>$edit_address->locality,'city'=>$edit_address->city,'landmark'=>$edit_address->landmark,'option_mobile_number'=>$edit_address->option_mobile_number,'user_name'=>$edit_address->user_name,'user_mobile'=>$edit_address->user_mobile]);
         }
        
    }

//javascript

 $(document).on('click', '.show_address', function(e){
  e.preventDefault();
  $('.edit_address_label').show();
  $('#edit_address').show();
  $("#address_show:checked").closest('.col-sm-8').find('.current_user_address').hide();
  $("#address_show:not(:checked)").closest('.col-sm-8').find('.edit_address_label').hide();
  $("#address_show:checked").closest('.display_address').find('.deliver_show_address').removeClass('deliver_address');
  $("#address_show:checked").closest('.display_address').find('.deliver_show_address').addClass('delivery_hide_address');
  $('#save_address').hide();
 var address_id=$(this).attr('data-val');
    $.ajax({
    type : 'get',
    url : '/edit-address',
    data:{ 'address_id':address_id
    },
    success:function(result)
    {
      
       $('#edit_address').attr("data-val",result.address_id);
       $('.show_address').parents().find('#name').val(result.user_name);
       $('.show_address').parents().find('#mobile_number').val(result.user_mobile);
       $('.show_address').parents().find('#address').val(result.address);
       $('.show_address').parents().find('#pincode').val(result.pincode);
       $('.show_address').parents().find('#locality').val(result.locality);
       $('.show_address').parents().find('#city').val(result.city);
       $('.show_address').parents().find('#landmark').val(result.landmark);
       $('.show_address').parents().find('#option_number').val(result.option_mobile_number);
    }
});
 });
<div class="col-sm-6">
                                <div class="form-group">
                                <label>State<span>*</span>
                                </label>
                                 <select name="new_state" class="form-control" id="state">
                                      <option value="">Select State</option>
                                     @foreach($state as $id => $state_name )
                                            <option value="{{ $id }}">{{ $state_name }}</option>
                                      @endforeach
                                   </select>
                                </div>
                              </div>

Answer 1

这是因为你做错了，我真的不知道你对数据有什么想法，但是你在控制器函数内开始一个foreach循环，但是你只返回$edit_address的第一行，其余的都被跳过。首先，将数据整体返回给JavaScript然后在Ajax complete()函数中循环，如下所示:

控制器:

public function edit_address(Request $request)
{
    $state = DB::table('states')->pluck('state_name','state_id');   
    $each_edit_address=DB::table('address')
    ->join('states','states.state_id','=','address.state_id')
    ->select('address.*','states.state_name')
    ->where('address_id',$request->address_id)
    ->get();

    return response()->json(['addresses' => $each_edit_address, 'states' => $state]);
}

，然后，在你的JS代码中，基于你从控制器返回的数据，你可以像下面这样循环遍历地址:

var address_id=$(this).attr('data-val');
$.ajax({
    type : 'get',
    url : '/edit-address',
    data:{ 'address_id':address_id
    },
    success:function(result)
    {
        $(result.addresses).each(function(address){
            console.log(address.user_name);
            // Write your own code here to deal with each address.
        });
    }
});

注意:您还可以在ajax complete()函数中访问状态数据，如下所示:

var address_id=$(this).attr('data-val');
$.ajax({
    type : 'get',
    url : '/edit-address',
    data:{ 'address_id':address_id},
    success:function(result)
    {
        console.log(result.states);
    }
});