Laravel9+Datatable仅首行下拉框无法填充数据问题求助

核心问题是DOM中存在重复的ID属性：你在@foreach循环中引入的edit视图里，下拉框容器的ID是appendCategoriesLevel，循环后每行模态框里的这个ID完全相同。而浏览器中ID是全局唯一的，所以$("#appendCategoriesLevel").html(resp)只会定位到页面中第一个拥有该ID的元素（也就是首行的模态框），其他行的容器根本不会被选中修改。

同时控制器里的echo "<pre>"; print_r($getCategories);会向AJAX响应中输出调试内容，破坏返回的HTML结构，也需要移除。

1. 修改模态框内的容器ID为唯一值 #

在你的admin.categories.edit视图中，把下拉框的容器ID改为和分类ID绑定的唯一值：

<!-- 原来的 <div id="appendCategoriesLevel"> 改成下面的 -->
<div id="appendCategoriesLevel-{{ $category['id'] }}" class="mb-1">
    <label class="form-label" for="parent_id-{{ $category['id'] }}">Nivel</label>
    <select name="parent_id" id="parent_id-{{ $category['id'] }}" class="form-control">
        <option value="0">Principal</option>
        @if(!empty($getCategories))
            @foreach($getCategories as $category)
                <option value="{{ $category['id'] }}">{{ $category['category_name'] }}</option>
            @endforeach
        @endif
    </select>
</div>

注意：同时把下拉框的id也改成parent_id-{{ $category['id'] }}，避免重复ID问题扩大。

2. 调整jQuery代码，定位到对应分类的容器 #

修改AJAX的success回调，根据点击按钮的catId找到对应模态框里的容器：

$(document).on("click",".updateLevel",function(){
    var catId = $(this).attr('catId');
    $.ajax({
        headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        type:'get',
        url:'append-categories-level',
        data:{catId:catId},
        success:function(resp){
            // 定位到当前分类对应的容器
            $("#appendCategoriesLevel-" + catId).html(resp);
        },error:function(){
            alert("Error");
        }
    });
});

3. 清理控制器的调试代码 #

移除控制器中多余的调试输出，确保返回的是纯净的HTML：

// Append Level
public function appendCategoriesLevel(Request $request){
    if($request->ajax()){
        $catId= $request->catId;
        $category = Category::find($catId);
        $getCategories = Category::where(['parent_id'=>0,'section_id'=>$category['section_id']])->get()->toArray();
        // 移除这两行调试代码
        // echo "<pre>"; print_r($getCategories);
        return view('admin.categories.append_categories_level')->with(compact('getCategories'));
    }
}

4. 动态视图的适配（可选） #

如果append_categories_level视图里的下拉框ID也需要唯一，可以在返回视图时传递catId，让生成的下拉框ID和当前分类绑定：

// 控制器修改返回参数
return view('admin.categories.append_categories_level')->with(compact('getCategories', 'catId'));

然后在append_categories_level视图中：

<label class="form-label" for="parent_id-{{ $catId }}">Nivel</label>
<select name="parent_id" id="parent_id-{{ $catId }}" class="form-control">
    <option value="0">Principal</option>
    @if(!empty($getCategories))
        @foreach($getCategories as $category)
            <option value="{{ $category['id'] }}">{{ $category['category_name'] }}</option>
        @endforeach
    @endif
</select>

• 可以利用Bootstrap模态框的show.bs.modal事件来触发数据加载，而不是点击按钮时加载，体验更流畅：

  $(document).on("show.bs.modal", ".edit-modal", function(e){
      var catId = $(e.relatedTarget).attr('catId');
      // 执行AJAX加载逻辑
  });
  

• 推荐用HTML5的data-*属性存储分类ID，比如给按钮添加data-cat-id="{{ $category['id'] }}"，然后用$(this).data('cat-id')获取，写法更规范。

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