使用jQuery Select2时下拉菜单显示但选项不可见的问题求助

核心问题 #

你遇到的下拉选项不可见、动态新增行的Select2失效问题，主要由以下几个原因导致：

• 重复使用同一ID：动态生成的所有下拉框都用了id="model_id"，HTML中ID必须唯一，这会导致Select2只能正确初始化第一个下拉框，后续新增的无法正常工作。
• dropdownParent配置错误：将下拉父容器设为了select元素本身，这会让Select2的下拉菜单被嵌套在select内部，导致视觉上不可见。
• 动态元素未重新初始化：新增行的下拉框生成后，没有重新调用Select2初始化，所以还是原生下拉，无法正常显示Select2样式。
• 可能缺失Select2样式文件：仅引入JS未引入CSS的话，Select2的下拉菜单会没有基础样式，导致选项看不见。

具体修复步骤 #

1. 修正ID重复问题 #

把动态生成的select的id去掉，改用类名标识，比如class="select2 form-control model-select"，保持name="model_id[]"即可：

html += '<td><div class="form-group"> <select name="model_id[]" class="select2 form-control model-select" required> <option value="" >Please select the model</option> @foreach ($model as $mod) <option value="{{ $mod->id }}">{{ $mod->name }}</option> @endforeach </select> @if($errors->has('model_id')) <div class="invalid-feedback"> {{ $errors->first('model_id') }} </div> @endif <span class="help-block"></span> </td>';

2. 修正Select2初始化逻辑 #

移除错误的dropdownParent配置，改为通过类名初始化，并在动态生成行后，对新添加的select重新初始化：

// 页面加载完成后执行
$(document).ready(function(){
    var count = 1;
    dynamic_field(count);
    // 初始化第一个下拉框
    initSelect2($('.model-select'));

    function dynamic_field(number){
        html = '<tr>';
        html += '<td>'+number+'<input type="hidden" name="row[]" value="'+number+'"></td>';    
        // 这里使用修改后的类名代码
        html += '<td><div class="form-group"> <select name="model_id[]" class="select2 form-control model-select" required> <option value="" >Please select the model</option> @foreach ($model as $mod) <option value="{{ $mod->id }}">{{ $mod->name }}</option> @endforeach </select> @if($errors->has('model_id')) <div class="invalid-feedback"> {{ $errors->first('model_id') }} </div> @endif <span class="help-block"></span> </td>';
        html += '<td><input type="number" min="1" name="quantity[]" class="form-control" required/></td>';
        html += '<td><input type="text" name="remark[]" class="form-control" placeholder=""/></td>';
        
        if(number > 1)
        {
            html += '<td><button type="button" name="remove" class="btn btn-danger remove">Remove</button></td></tr>';
            var newRow = $(html).appendTo('tbody');
            // 初始化新行的下拉框
            initSelect2(newRow.find('.model-select'));
        }
        else
        {
            html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
            $('tbody').append(html);
        }
    }

    // 初始化Select2的通用函数
    function initSelect2(elem) {
        elem.select2({
            placeholder: "Please select the model",
            dropdownParent: $('body') // 设为body避免被其他元素遮挡
        });
    }

    $(document).on('click', '#add', function(){
        count++;
        dynamic_field(count);
    });

    $(document).on('click', '.remove', function(){
        count--;
        $(this).closest("tr").remove();
    });

    $('form').submit(function(){
        $(this).find(':input[type=submit]').prop('disabled', true);
    }); 
});

3. 引入Select2样式文件 #

确保在页面头部引入Select2的CSS文件，比如：

<link href="{{url('js/formplugins/select2/select2.min.css')}}" rel="stylesheet">

4. 删除原有错误初始化代码 #

移除这段错误的单独初始化代码：

$('#model_id').select2({
    dropdownParent: $('#model_id')
});

额外注意事项 #

• 确保Select2的JS和CSS版本匹配，避免版本不兼容问题
• 检查页面其他CSS是否覆盖了Select2下拉菜单样式，比如设置display: none或opacity: 0等属性

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