JavaScript实现多选下拉框选中后禁用该选项避免重复追加内容

问题原因 #

你自行编写的禁用逻辑未生效主要是2个选择器匹配错误：

• 你的下拉框ID为select_items，原有代码写的select.select_items是匹配类名为select_items的下拉元素，完全匹配不到目标元素，事件根本不会触发
• 你的下拉框name属性为product_id，原有代码写的select[name*="product_id[]"]匹配的是name带product_id[]的元素，同样匹配不到目标
  另外原有populate函数每次触发会遍历所有已选中项重复追加输入框，哪怕禁用了选择逻辑也可能出现重复追加问题。

修改后的完整代码 #

JS部分 #

// 用于存储已经追加过输入框的选项值，避免重复追加
const addedProducts = new Set();

function populate() {
  $('#select_items :selected').each(function() {
    const prodVal = $(this).val();
    const prodText = $(this).text();
    // 已经追加过的直接跳过
    if (addedProducts.has(prodVal)) return;
    
    // 追加输入框
    let html = '';
    html += '<div class="prod-item" data-val="'+ prodVal +'">';
    html +='<label> Quantity:'+ prodText +' </label>';
    html += '<input type="text" name="quantity[]" class="form-control" placeholder="Enter Quantity" required value="'+ prodVal +'" />';
    // 可选：加删除按钮，删除后恢复选项可用
    // html += '<button type="button" class="del-prod">删除</button>'
    html += '</div>'
    $('#selected-quantity').append(html);
    
    // 标记为已追加
    addedProducts.add(prodVal);
    // 禁用该选项，避免重复选择
    $(this).prop('disabled', true);
  })
}

// 可选：删除输入框时恢复选项可用
// $(document).on('click', '.del-prod', function() {
//   const prodVal = $(this).closest('.prod-item').data('val');
//   addedProducts.delete(prodVal);
//   $('#select_items option[value="'+ prodVal +'"]').prop('disabled', false);
//   $(this).closest('.prod-item').remove();
// })

HTML调整 #

原有HTML不用大幅修改，仅修正下拉框重复写class属性、默认选项的异常选中状态即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" style="width:60%;margin-left:200px">
  <div class="form-group">
    <label>Choose Product:</label>
    <select name="product_id" class="form-control select" id="select_items" multiple onchange="populate()">
      <option disabled>-- Select Product --</option>
      <option value="foo1">foo1</option>
      <option value="foo2">foo2</option>
      <option value="foo3">foo3</option>
      <option value="foo4">foo4</option>
      <option value="foo5">foo5</option>
    </select>
    <div id="selected-quantity"></div>
  </div>
</form>

逻辑说明 #

• 用Set存储已经添加过的产品值，从根本上避免重复追加输入框
• 每次选中选项追加完成后直接给当前option设置disabled属性，无法再次选中
• 可选的删除逻辑如果需要可以放开注释，实现删除输入框后恢复选项可选的效果

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