多选下拉框中序列号选择的优化：防止重复，确保数据准确性

javascript

2024-03-24 18:59:58

多选下拉框中的序列号选择与防止重复

问题

在多选下拉框中，用户需要选择芯片并更改与该芯片关联的序列号。但是，如果同一序列号被另一个下拉框选中，就不应该再次出现。

解决方案

步骤 1：收集已选择的芯片 ID

遍历所有包含芯片 ID 的隐藏输入，并将值存储在数组中。

步骤 2：创建序列号选项

创建一个序列号选项列表。对于每个序列号，如果它不在已选择的芯片数组中，则将其添加到选项列表中。

步骤 3：更新下拉框

使用更新后的序列号选项列表，更新具有相同 ID 的下拉框。这将隐藏已选择的序列号，并仅显示可用的序列号。

步骤 4：关闭模态框并添加新行

关闭用于选择芯片和序列号的模态框。使用已选择的芯片 ID、更新的序列号选项和必要的信息创建新行并将其添加到表格中。

代码示例

var chipsSelecionados = [];
$("input[name='inventarios[]']").each(function() {
  var id = $(this).val();
  chipsSelecionados.push(id);
});


var optionsChips = seriais.map(function(seriais) {
  var id = seriais.id;
  if ($.inArray(id.toString(), chipsSelecionados) === -1) {
    return "<option value='" + seriais.id + "'>" + seriais.serial + "</option>";
  }
}).join("");



$('#modal-buscar-linha').modal("hide");

var novaLinha = "<tr>" +
  "<input type='hidden' name='inventarios[]' value='" + idChip + "'>" +
  "<td style='vertical-align: middle;'><select class='form-control' style='margin: 0 auto;'>" + optionsChips + "</select></td>" +
  "<td>" + agenda + "</td>" +
  "<td style='vertical-align: middle;'><select class='form-control' style='margin: 0 auto;'><option>Não selecionar</option>" + options + "</select></td>" +
  "<td class='text-center'>" +
  "<button class='btn btn-danger delete-button' type='button'><i class='fa fa-trash' aria-hidden='true'></i></button>" +
  "</td>" +
  "</tr>";