Laravel 5.2中如何从数据库设置下拉框选中值（AJAX场景）

我来帮你一步步搞定这两个更新表单里的常见需求：

一、回显数据库中已选中的下拉框值 #

核心思路是把数据库里的已选值传递到前端，等AJAX加载完下拉选项后再设置选中状态，分三步操作：

1. 控制器传递已选值到视图 #

在你的编辑页面控制器方法中，取出当前记录的已选ID（比如tugas_id），把它传递给视图：

public function edit($id)
{
    // 替换成你的实际模型和查询逻辑
    $targetRecord = YourModel::findOrFail($id);
    return view('your-edit-view', compact('targetRecord'));
}

2. 视图中存储已选值 #

在视图里，把已选值存到JS变量或者隐藏域中，方便后续JS调用：

<!-- 你的下拉框 -->
<select id="name_3"></select>

<!-- 方式1：用隐藏域存储 -->
<input type="hidden" id="selected_tugas_id" value="{{ $targetRecord->tugas_id }}">

<!-- 方式2：直接定义JS变量 -->
<script>
var selectedTugasId = {{ $targetRecord->tugas_id }};
</script>

3. AJAX加载后设置选中状态 #

在AJAX请求的成功回调里，加载完下拉选项后，用已选值设置选中状态：

$.ajax({
    url: '/getTugasDetailUpdate', // 替换成你的实际接口URL
    type: 'GET',
    success: function(response) {
        // 先把选项插入下拉框（根据接口返回格式调整）
        $('#name_3').html(response.html); // 如果接口返回HTML字符串
        
        // 设置选中项：两种方式选其一即可
        $('#name_3').val(selectedTugasId); // 推荐，直接通过value匹配
        // 或者用prop方法：
        // $('#name_3 option[value="' + selectedTugasId + '"]').prop('selected', true);
    }
});

二、给下拉框选项添加name_xxx格式的ID #

这个需要在生成下拉选项时，给每个<option>标签加上自定义ID，分两种场景处理：

场景1：控制器直接返回HTML选项字符串 #

如果你的getTugasDetailUpdate方法原本是直接返回拼接好的HTML，那修改控制器代码，在生成<option>时加上id属性：

public function getTugasDetailUpdate()
{
    // 替换成你的实际查询逻辑
    $tugasList = Tugas::all();
    $optionHtml = '';
    
    foreach($tugasList as $dtL) {
        // 拼接id="name_{$dtL->id}"
        $optionHtml .= '<option value="'.$dtL->id.'" id="name_'.$dtL->id.'">'.$dtL->name.'</option>';
    }
    
    return response()->json(['html' => $optionHtml]);
}

这样前端拿到的HTML里，每个选项都会带有name_xxx格式的ID，直接插入下拉框即可。

场景2：控制器返回JSON数据，前端生成选项 #

如果接口返回的是JSON格式的选项数据，那在JS里循环生成<option>时添加ID：

success: function(response) {
    var selectBox = $('#name_3');
    selectBox.empty();
    
    // 假设response.options是包含id和name的数组
    $.each(response.options, function(index, item) {
        var option = $('<option>')
            .attr('value', item.id)
            .attr('id', 'name_' + item.id) // 生成目标格式的ID
            .text(item.name);
        
        selectBox.append(option);
    });
    
    // 别忘了设置选中项
    selectBox.val(selectedTugasId);
}

对应的控制器需要返回JSON结构：

public function getTugasDetailUpdate()
{
    $tugasList = Tugas::all();
    $options = $tugasList->map(function($item) {
        return [
            'id' => $item->id,
            'name' => $item->name
        ];
    });
    
    return response()->json(['options' => $options]);
}

额外小提示 #

• 确保已选值和下拉选项的value属性类型完全一致（比如都是数字或字符串），否则val()方法可能不生效。
• 如果多个页面需要类似逻辑，可以把设置选中的代码封装成一个小函数，避免重复造轮子。

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