如何在Laravel框架下用jQuery实现下拉框已选选项不在新增选择器中展示

步骤1：公共变量与通用方法定义 #

先在JS全局作用域定义变量和通用方法，避免重复请求接口、重复写过滤逻辑：

// 存储当前仓库下的全量slot_id列表
let allSlots = [];
// 统一选择器，所有slot下拉框都加这个类，方便批量操作
const SLOT_SELECTOR = '.slot-select';

// 通用方法：获取当前所有已选中的slot_id数组
function getSelectedSlots() {
    let selected = [];
    $(SLOT_SELECTOR).each(function() {
        let val = $(this).val();
        if(val && val != '-- Pilih Pallet --') {
            selected.push(val);
        }
    });
    return selected;
}

步骤2：修改初始下拉框与原有AJAX逻辑 #

首先给初始下拉框加统一类名，修改初始视图代码：

<div class="col-md-5">
    <label>Pilih Pallet : </label>
    <div class="input-group mb-3">
    <div class="input-group-prepend">
         <span class="input-group-text"><i class="fas fa-portrait"></i></span>
    </div>
    <!-- 新增slot-select类 -->
    <select class="form-control slot-select" id="slot_id" name="slot_id[]"><option>-- Pilih Pallet --</option></select>
    </div>
</div>

然后修改仓库切换的AJAX代码，请求成功后把全量插槽列表存到全局变量：

$('#warehouse').change(function(){
      var warehouseid = $(this).val(); 
      if(warehouseid){
          $.ajax({
              type:"GET",
              url:"/admin-master/get_slot_id?warehouseid="+warehouseid,
              dataType: 'JSON',
              success:function(res){        
              if(res){
                  // 把全量slot列表存到全局变量，后续新增下拉框直接用
                  allSlots = res;
                  $("#slot_id").empty();
                  $("#slot_id").append('<option>-- Pilih Pallet --</option>');
                  $.each(res,function(id_slot,id_slot){
                      $("#slot_id").append(
                        '<option value="'+id_slot+'">'+id_slot+'</option>'
                      );
                  });
              }else{
                     allSlots = [];
                     $("#slot_id").empty();
              }
              }
          });
      }else{
              allSlots = [];
              $("#slot_id").empty();
      }      
  });

步骤3：修改新增下拉框逻辑 #

给新增的下拉框也加统一slot-select类，生成后自动填充过滤后的选项：

// 新增按钮点击事件里的模板代码，i是你自定义的递增索引
let newSelectHtml = '<div class="col-md-5">' + 
    '<label>Pilih Pallet : </label>' +
    '<div class="input-group mb-3">' +
      '<div class="input-group-prepend">' +
        '<span class="input-group-text"><i class="fas fa-portrait"></i></span>' +
      '</div>' +
      // 新增slot-select类
      '<select id="slot_id'+i+'" class="form-control slot-select" name="slot_id['+i+']"></select>' +
    '</div>' +
  '</div>';

// 把新下拉框插入到你指定的页面容器后，渲染过滤后的选项
$('.你存放下拉框的容器选择器').append(newSelectHtml);
let selectedSlots = getSelectedSlots();
let $newSelect = $('#slot_id'+i);
$newSelect.append('<option>-- Pilih Pallet --</option>');
$.each(allSlots, function(index, id_slot) {
    // 已经被选中的插槽不会出现在新下拉框的可选列表中
    if(!selectedSlots.includes(id_slot)) {
        $newSelect.append('<option value="'+id_slot+'">'+id_slot+'</option>');
    }
});

步骤4：后端校验补充（可选） #

如果需要防止前端篡改数据，可在Laravel后端提交接口加重复值校验：

// 控制器验证逻辑示例
$validated = $request->validate([
    'slot_id' => 'required|array',
    'slot_id.*' => 'distinct|exists:slots,id', // distinct校验数组值不重复，exists校验插槽ID真实存在
]);

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