以laravel显示所选下拉列表中的值

Question

我想从下拉菜单中显示所选收件人名称的详细地址。因此，如果我选择地址A，它将显示地址A的详细信息。我已经在编写代码了，但问题是它没有显示正确的值，而是显示了数据库中的最后一条记录。这是代码：

刀片

<select class="address-detail form-control" id="address" name="address_detail" data-target=".detail-info-address">
<option value="option_select">Select Address</option>
@foreach($addresses as $address)
<option value="{{$address->id}}"  data-show=".info-address">{{$address->recipient_name}}
</option>
@endforeach
</select>
<div class="detail-info-address">
<div class="info-address hide text-left">
<p>Recipient Name: {{$address->recipient_name}}</p>
<p>Contact Number: {{$address->contact_number}}</p>
<p>Address: {{$address->address}}</p>
<p>Address Note (optional): {{$address->address_note}}</p>
<p>Post Code: {{$address->post_code}}</p>
<p>Province: {{$address->province}}</p>
<p>City: {{$address->city}}</p>
<p>District: {{$address->district}}</p>
<br>
</div>
</div>

控制器

public function buynow($id) {
$addresses = Address_Delivery_Users::where('user_id', '=', Auth::user()->id)->get();
return view('/transactions/delivery', compact('addresses'));
}

Javascript

<script>
$(document).on('change', '.address-detail', function() {
var target = $(this).data('target');
var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.address-detail').trigger('change');
});
</script>

Answer 1

您的问题是变量$address是在foreach循环中定义的，因此循环的最后一个元素将设置为$address。

因此，您的地址块将始终包含最后一个地址元素的属性。初始呈现页面后，您将无法在PHP变量$address中显示另一个地址。

区分服务器端的PHP和客户端的JS是很重要的。

您必须收听select的更改事件并获取新数据。有两种选择。

1. 您向服务器发出ajax请求，返回地址对象并相应地设置所有字段。

2. 在foreach循环中，您为地址的每个属性添加一个数据-<可变名称>html属性和onchange获取所有数据属性，并将它们插入地址块的正确字段中。

我建议使用Vue.js执行此任务。然而，如果您是新手，并且根本没有太多经验，那么现在可以尝试纯JS/Jquery。