Laravel编辑页面如何保留动态依赖下拉框选中值？

我懂你的困扰——动态加载的下拉框在编辑页面没法自动选中之前保存的值，这是因为当前代码只负责加载选项，完全没处理编辑场景下的默认选中逻辑，再加上职位下拉框依赖买家选项，初始化流程也得调整才能适配编辑页。

下面是具体的修改方案：

1. 在Blade模板中传递默认选中值给JS #

首先在edit.blade.php里，在引入动态下拉框的JS代码之前，把订单里的买家ID和职位ID暴露给JavaScript：

<!-- 放在动态下拉框JS之前，传递编辑页的默认选中值 -->
<script>
const defaultBuyerId = "{{ $order->name }}";
const defaultJobId = "{{ $order->job_name }}";
</script>

2. 修改JavaScript逻辑，适配编辑页默认选中 #

更新你的动态下拉框JS代码，让它支持加载完选项后自动选中默认值，并且调整初始化流程：先加载买家并选中默认项，再基于选中的买家加载对应职位并选中：

<script type="text/javascript">
$(function () {
    $(".select2").select2();
});

/** Dependent Dropdowns**/
$(function() {
    // 初始化加载买家列表，同时处理默认选中
    dynamicDropdown('/admin/commercial/get-buyers', '#buyerName', defaultBuyerId, function() {
        // 买家加载并选中后，再加载对应职位列表
        if (defaultBuyerId) {
            let url = `/admin/commercial/get-buyer-jobs/${defaultBuyerId}`;
            dynamicDropdown(url, '#jobName', defaultJobId);
        }
    });

    $('#buyerName').change(function() {
        let url = `/admin/commercial/get-buyer-jobs/${this.value}`;
        let target = '#jobName';
        // 切换买家时，重新加载职位并清空之前的选中状态
        dynamicDropdown(url, target);
    });
});

// 扩展dynamicDropdown函数，支持默认选中值和回调函数
function dynamicDropdown(url, selector, defaultValue = null, callback = null) {
    $.get(url, function (data) {
        let $select = $(selector);
        $select.find('option').not(':first').remove();
        let options = [];
        $.each(data, function(index, item) {
            // 生成选项时判断是否为默认值，添加selected属性
            let selectedAttr = defaultValue == item.id ? 'selected' : '';
            options.push(`<option value="${item.id}" ${selectedAttr}>${item.name}</option>`);
        });
        $select.append(options);
        // 手动触发change事件，刷新select2组件确保选中状态生效
        $select.trigger('change');
        // 如果传入了回调函数，执行后续逻辑
        if (typeof callback === 'function') {
            callback();
        }
    });
}
</script>

3. 验证字段对应关系 #

请确认你的BuyerOrder模型中：

• name字段确实存储的是买家的ID（和get-buyers接口返回的item.id对应）
• job_name字段确实存储的是职位的ID（和get-buyer-jobs接口返回的item.id对应）

如果模型字段名不匹配（比如买家ID存在buyer_id字段），记得修改defaultBuyerId对应的模型属性，比如改成{{ $order->buyer_id }}。

这样修改后，编辑页面加载时会：

1. 先加载所有买家选项，自动选中订单对应的买家
2. 基于选中的买家加载对应的职位选项，自动选中订单对应的职位
3. 切换买家时，依然能正常加载对应职位，同时清空之前的职位选中状态

内容的提问来源于stack exchange，提问作者Rashed Hasan