如何检测多选select中最近移除的选项值并更新AllProductArray数组

你的代码目前只实现了添加选中项到数组的逻辑，但没有处理移除选项时的数组更新，所以会出现移除选项后数组依然保留旧值的情况。下面根据两种常见的多选场景给出解决方案：

场景1：自定义重复选择（选一次添加一个项，支持重复选择） #

如果你的选择框是选一次就添加一个产品到数组（允许重复），且通过删除按钮移除已选项，修改代码如下：

var AllProductArray = [];

// 添加产品逻辑
function SelectProductWisely() {
  var selectedProduct = $('#SelectProduct').val();
  if (selectedProduct) {
    var productId = parseInt(selectedProduct);
    AllProductArray.push(productId);
    renderSelectedTags(); // 渲染已选标签（带删除按钮）
  }
  
  console.log({ selectedProduct, AllProductArray });
  $('#SelectProduct').val(0);
  syncWithAPI();
}

// 删除指定产品
function removeProduct(productId) {
  // 找到数组中对应项的索引，删除第一个匹配项
  var index = AllProductArray.indexOf(productId);
  if (index !== -1) {
    AllProductArray.splice(index, 1);
    renderSelectedTags();
    syncWithAPI();
    console.log({ removedProduct: productId, AllProductArray });
  }
  // 如果需要删除所有重复的该项，替换成下面的过滤逻辑：
  // AllProductArray = AllProductArray.filter(id => id !== productId);
}

// 渲染已选产品的标签（示例）
function renderSelectedTags() {
  var container = $('#selectedProducts');
  container.empty();
  AllProductArray.forEach(id => {
    var tag = $('<span class="tag"></span>').text(`产品${id}`);
    var deleteBtn = $('<button class="del-btn">×</button>').click(() => removeProduct(id));
    tag.append(deleteBtn);
    container.append(tag);
  });
}

// 封装API请求，统一调用
function syncWithAPI() {
  $.ajax({
    url: 'API.php',
    type: 'GET',
    data: {
      ReqType: "CheckLimitPrice",
      Product: AllProductArray
    },
    success: function(response) {
      console.log(response);
      if (response < 1100) {
        console.log("done");
      } else {
        console.log("done");
        // 这里可以添加金额超限的提示逻辑
      }
    },
  });
}

关键修改点： #

• 新增removeProduct函数，通过产品ID定位数组中的项并删除
• 新增标签渲染函数，给每个已选项绑定删除事件
• 把API请求封装成syncWithAPI，添加和删除时都调用，保证数组和后端同步

场景2：原生多选Select（带multiple属性） #

如果你的选择框是原生的多选组件（设置了multiple属性），直接监听change事件同步数组即可：

var AllProductArray = [];

// 监听多选框的变化事件
$('#SelectProduct').on('change', function() {
  // 获取当前所有选中的值，转成数字数组
  AllProductArray = $(this).val()?.map(val => parseInt(val)) || [];
  
  console.log({ AllProductArray });
  syncWithAPI();
});

// 封装API请求
function syncWithAPI() {
  $.ajax({
    url: 'API.php',
    type: 'GET',
    data: {
      ReqType: "CheckLimitPrice",
      Product: AllProductArray
    },
    success: function(response) {
      console.log(response);
      if (response < 1100) {
        console.log("done");
      } else {
        console.log("done");
        // 处理超限逻辑
      }
    },
  });
}

关键逻辑： #

原生多选Select的val()方法会返回当前所有选中值的数组，每次选项变化时直接用这个数组覆盖AllProductArray，自动同步添加和移除操作。

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