在 laravel 中显示选定下拉列表中的值

Posted 2023-03-14

【中文标题】在 laravel 中显示选定下拉列表中的值

【英文标题】：Show value from selected dropdown in laravel

【发布时间】：2021-07-13 08:25:51

【问题描述】：

我想从下拉菜单中显示所选收件人姓名的详细地址。因此，如果我选择地址 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>

【问题讨论】：

我认为您没有选择正确的选项：$('.address-detail').find(":selected").data('show')。而在buynow函数中，$id：id的值有什么作用？

我已经尝试过了，但它不起作用，但我现在正在努力，谢谢

【参考方案1】：

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

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

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

您将不得不监听 select 的 change 事件并获取新数据。有两种选择。

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

在您的 foreach 循环中，您为地址的每个属性添加一个 data- html 属性，onchange 获取所有 data- 属性并将它们插入地址块的正确字段中。

我建议使用 Vue.js 来完成这项任务。但是，如果您是新手并且没有太多经验，那么您现在可以尝试纯 JS/Jquery。

【讨论】：

好的，谢谢，我可能会使用第二个选项。