如何在Laravel中实现下拉框动态显示数据库选中值？

先明确问题 #

你当前的代码已经能在页面首次加载时从数据库拉取Program数据渲染下拉框，但如果要实现动态更新（比如根据用户操作实时刷新下拉选项），需要结合AJAX实现；如果是默认选中状态不符合预期，调整查询逻辑即可。

方案1：实现下拉框动态刷新（AJAX方式） #

如果要让下拉框能根据用户操作（比如另一个下拉框选择变化、按钮点击）实时从数据库拉取最新数据，按以下步骤修改：

1. 添加接口路由 #

在routes/web.php中新增返回JSON数据的路由：

Route::get('/programs/list', [你的控制器类名::class, 'getProgramList'])->name('programs.list');

2. 控制器新增接口方法 #

在Controller.php里添加专门返回Program数据的接口方法：

// 保留原有的页面渲染方法
public function getValues($id) {
    $coba = Program::select('id_program','nama')->get();
    // 建议用传入的$id获取默认选中项，而非固定查询id=1的记录
    $cobaja = Program::find($id) ?? Program::first();
    return view('payment.index', compact('coba','cobaja'));
}

// 新增AJAX接口，用于动态获取数据
public function getProgramList(Request $request) {
    // 可根据需求添加筛选条件，比如$request->get('category_id')
    $programs = Program::select('id_program', 'nama')->get();
    return response()->json($programs);
}

3. 前端视图修改（index.php） #

添加JS代码实现动态拉取数据并更新下拉框：

<select id="filter-layanan" class="form-control input-sm">
    <option>Select Item</option>
    @foreach ($coba as $ca)
    <option value="{{ $ca->id_program }}" {{ $cobaja->id_program == $ca->id_program ? 'selected' : '' }}>
        {{ $ca->nama }}
    </option>
    @endforeach
</select>

<!-- 引入jQuery（若项目已引入可省略，也可替换为原生JS实现） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 示例：绑定按钮点击触发下拉框更新，也可绑定到其他下拉框的change事件
$('#refresh-dropdown').on('click', function() {
    updateProgramDropdown();
});

// 可选：定时自动刷新下拉框（按需启用）
// setInterval(updateProgramDropdown, 5000);

function updateProgramDropdown() {
    $.ajax({
        url: "{{ route('programs.list') }}",
        type: 'GET',
        success: function(data) {
            const dropdown = $('#filter-layanan');
            dropdown.empty().append('<option>Select Item</option>');
            
            data.forEach(program => {
                dropdown.append(`<option value="${program.id_program}">${program.nama}</option>`);
            });
        },
        error: function() {
            alert('加载数据失败，请重试');
        }
    });
}
</script>

方案2：修复默认选中的动态匹配 #

如果你的问题是默认选中项不符合预期，只需修改控制器中固定查询id=1的逻辑，改用传入的$id查询：

public function getValues($id) {
    $coba = Program::select('id_program','nama')->get();
    // 用路由传入的$id查询对应记录，无匹配时取第一条数据
    $cobaja = Program::find($id) ?? Program::first();
    return view('payment.index', compact('coba','cobaja'));
}

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