如何在JavaScript中对比ListBox与Table值并实现重复选择限制

我看了你的代码，发现核心问题在于重复判断逻辑有误，还绑定了两次change事件导致行为冲突。下面是修正后的完整实现，完美满足禁止重复选择、重复时弹出提示、正确追加行并命名表单元素的需求：

完整代码实现 #

HTML部分 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="row">
  <!-- Existing Suppliers -->
  <div class="col-sm-6">
    <div class="col-12">
      <div class="row">
        <div class="col-12">
          <input class="form-control serch" id="supSearch" type="search" placeholder="Search Existing Suppliers..">
          <div class="selector">
            <select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
              <option class="indexDrop">Choose Existing Suppliers</option>
              <option value="0000">Komal </option>
              <option value="0001">Ranjeet</option>
              <option value="0002">Vishal </option>
              <option value="0003">Gaurav</option>
              <option value="0004">Dhanpat</option>
              <option value="0005">Joe</option>
              <option value="0006">Gowri</option>
              <option value="0007">shankar</option>
              <option value="0008">Dhanpat</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Table -->
  <div class="col-5">
    <div class="container">
      <div class="row clearfix">
        <div class="table-wrapper">
          <div class="table-scroll">
            <table id="letterTable" class="table table-bordered table-striped order-scroll order-list" style="width: 95%;">
              <thead>
                <tr style="background-color: #680f79;color: #fff;">
                  <th class="text-center">Supplier Name</th>
                  <th class="text-center">Supplier Code</th>
                  <th class="text-center">Action</th>
                </tr>
              </thead>
              <tbody id="mytbody" style="text-align: center;">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript部分 #

$(document).ready(function() {
  // 统一绑定ListBox的change事件
  $("#excist_supp").on("change", function() { 
    $(".indexDrop").hide(); 
    const selectedText = $(this).find("option:selected").text().trim();
    const selectedValue = $(this).find("option:selected").val();

    // 跳过默认提示选项
    if (selectedValue === "" || $(this).find("option:selected").hasClass("indexDrop")) {
      return;
    }

    // 检查Table中是否已存在该供应商编码
    let isDuplicate = false;
    $("#letterTable tbody .newStyle2").each(function() {
      if ($(this).val() === selectedValue) {
        isDuplicate = true;
        return false; // 找到重复项后终止遍历
      }
    });

    if (isDuplicate) {
      alert("您已选择该选项，请选择其他选项");
      return; // 重复则不执行后续追加逻辑
    }

    // 获取当前表格行数，用于生成唯一的ID和name属性
    const rowCount = $("#letterTable tbody tr").length;

    // 构造并追加新行
    const newRow = `
      <tr>
        <td><input type="text" id="sm_supp${rowCount}" value="${selectedText}" class="form-control newStyle1" name="sm_supp[${rowCount}]" readonly></td>
        <td><input type="text" id="sm_code${rowCount}" value="${selectedValue}" class="form-control newStyle2" name="sm_code[${rowCount}]" readonly></td>
        <td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></td>
      </tr>
    `;
    $("#letterTable tbody").append(newRow);

    // 绑定删除按钮的点击事件
    $(".ibtnDel").off("click").on("click", function() {
      $(this).closest("tr").remove();
      // 可选：如果需要删除后重新允许选择该选项，可在此添加逻辑
    });
  });
});

关键改进说明 #

• 统一事件处理：移除了重复的change事件绑定，避免逻辑冲突
• 精准重复判断：遍历表格中所有供应商编码输入框，对比选中值，确保判断准确
• 简化元素命名：用当前表格行数作为索引，直接生成新行的ID和name，无需遍历修改所有行，效率更高
• 完善交互逻辑：添加删除行功能，同时跳过默认提示选项，避免无效操作

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