javascript - 防止将重复值从文本框添加到列表框

Question

我有一个文本框，用户扫描条形码，然后选择“添加到列表”按钮，将它们添加到列表框。我正在尝试修改它以防止添加重复项，但似乎找不到有效的方法。

function addToList(barcode) {

    var barcode = document.getElementById("barcode").value.toUpperCase();
    var opt = document.createElement("option");
        document.getElementById("lstBox1").options.add(opt);            

        opt.text = barcode;
        opt.value = barcode;
        //$('barcode').val('');
        document.getElementById("barcode").value='';
    return false;
}

最好的方法是什么？

Answer 1

一种可能的解决方案是跟踪数组中输入的值

然后通过检查该值是否存在于数组中，您可以将该值添加到下拉列表中

<小时/>

var allValues = [];
function addToList(){
    var barcodeInput = document.getElementById("barcode");
    var barcode = barcodeInput.value.toUpperCase();
    barcodeInput.value='';
    
    //if this value is already in the array, do nothing
    if( -1 !== allValues.indexOf(barcode) ){
        return;
    }
    
    allValues.push(barcode);
    var opt = document.createElement("option");
    document.getElementById("lstBox1").options.add(opt);            
    opt.text = barcode;
    opt.value = barcode;
    
    return false;   
}

select{
  min-width:100px;
}

<input id="barcode" />
<br/>
<select id="lstBox1"></select>
<br/>
<button onclick="addToList()">Add</button>