javascript - 在 ajax 成功的选择框上显示状态并在下拉列表中显示其他状态
问题描述
您好,我在 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>
解决方案
这是因为你做错了,我真的不知道你对数据有什么想法,但是你在控制器函数中启动了一个 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);
}
});
推荐阅读
- python-3.x - 如何用 BeautifulSoup 提取这些链接?
- python - 如何在 Python 中从现有的超类类型对象实例化子类类型变量
- excel - 运行时出现逗号循环生成错误的文本到列,但不在调试中
- python - 如何根据python中的两个类别获取列的最后一个值?
- c - NodeMCU client.connect 为本地托管的解析 api 返回 0?
- reactjs - 无法运行 expo 开发者工具
- php - 为什么我没有收到带有输入到本地托管(非非法)网络钓鱼站点的凭据的电子邮件?
- jquery - 在 asp .net core 中的某些字段上搜索页面的最佳方式
- reactjs - React Redux,存储调度不触发组件更新
- tensorflow - 如何将保存的 .pb 模型转换为 TFLITE?