Laravel动态新增表单时如何实时展示未选中的下拉选项

核心思路是遍历所有托盘选择框的选中值，替换原有的仅收集前两个值的逻辑，修改后完整步骤如下：

1. 修改动态区块托盘加载的jQuery代码 #

将原来仅收集索引0和前一个区块值的逻辑，替换为遍历所有已存在的托盘选择框：

$(document).on('change', '.warehouse2', function(){
    var warehouseid = $(this).val(); 
    let idtarget  = $(this).data('idtarget');
    // 新增：收集所有已选的托盘ID
    let data = [];
    $('select[name^="slot_id"]').each(function() {
        let selectedVal = $(this).val();
        if(selectedVal && selectedVal !== '') {
            data.push(selectedVal);
        }
    });
    console.log(data); // 可查看完整的已选ID数组
    if(warehouseid){
        $.ajax({
            type:"GET",
            url:"/admin-user/get_slot_id_not_in?warehouseid="+warehouseid,
            data:{"data":data},
            dataType: 'JSON',
            success:function(res){             
            if(res){
                $("#slot_id" + idtarget).empty();
                $("#slot_id" + idtarget).append('<option>---Pilih Pallet---</option>');
                $.each(res,function(id_slot,id_slot){
                    $("#slot_id" + idtarget).append(
                      '<option value="'+id_slot+'">'+id_slot+'</option>'
                    );
                });
            }else{
                   $("#slot_id" + idtarget).empty();
            }
            }
        });
    }else{
            $("#slot_id" + idtarget).empty();
    }      
}); 

2. （可选优化）修改索引0的仓库变更逻辑 #

避免修改首个区块仓库时，出现已被后续区块选中的托盘选项，统一复用过滤接口：

$('#warehouse').change(function(){
    var warehouseid = $(this).val(); 
    // 同样收集所有已选托盘ID
    let data = [];
    $('select[name^="slot_id"]').each(function() {
        let selectedVal = $(this).val();
        if(selectedVal && selectedVal !== '') {
            data.push(selectedVal);
        }
    });
    if(warehouseid){
        $.ajax({
            type:"GET",
            url:"/admin-user/get_slot_id_not_in?warehouseid="+warehouseid,
            data:{"data":data},
            dataType: 'JSON',
            success:function(res){        
            if(res){
                $("#slot_id").empty();
                $("#slot_id").append('<option value="">-- Pilih Pallet --</option>');
                $.each(res,function(id_slot,id_slot){
                    $("#slot_id").append(
                      '<option value="'+id_slot+'">'+id_slot+'</option>'
                    );
                });
            }else{
                   $("#slot_id").empty();
            }
            }
        });
    }else{
            $("#slot_id").empty();
    }      
});

3. （可选补充）监听全局托盘选择变更 #

如果需要实现「修改前面已选的托盘后，后面所有区块的选项同步更新过滤规则」的效果，可以新增以下监听逻辑：

$(document).on('change', 'select[name^="slot_id"]', function() {
    // 所有区块的仓库ID默认统一，若允许不同仓库可自行调整对应逻辑
    let currentWarehouse = $('#warehouse').val() || $('.warehouse2:first').val();
    if(!currentWarehouse) return;
    // 收集所有已选ID
    let data = [];
    $('select[name^="slot_id"]').each(function() {
        let selectedVal = $(this).val();
        if(selectedVal && selectedVal !== '') {
            data.push(selectedVal);
        }
    });
    // 重新加载所有托盘下拉的选项
    $('select[name^="slot_id"]').each(function() {
        let $select = $(this);
        let currentVal = $select.val();
        $.ajax({
            type:"GET",
            url:"/admin-user/get_slot_id_not_in?warehouseid="+currentWarehouse,
            data:{"data":data.filter(v => v !== currentVal)}, // 过滤时排除当前下拉自身的选中值
            dataType: 'JSON',
            success:function(res){             
                if(res){
                    $select.empty();
                    $select.append('<option>---Pilih Pallet---</option>');
                    $.each(res,function(id_slot,id_slot){
                        let selected = id_slot === currentVal ? 'selected' : '';
                        $select.append(`<option value="${id_slot}" ${selected}>${id_slot}</option>`);
                    });
                    // 保留原来的选中值
                    if(currentVal) $select.val(currentVal);
                }else{
                    $select.empty();
                }
            }
        });
    });
});

后端控制器代码无需修改，原有whereNotIn逻辑可直接适配前端传过来的完整已选ID数组。

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