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>

Answer 2

在添加到列表之前，请检查列表中不存在该值。你可以试试这个

var listbox=document.getElementById("lstBox1")
for(var i; i<listbox.options.length; i++)
{
    if(listbox.options[i].value!=barcode)
    {
       var opt = document.createElement("option");
       opt.text = barcode;
       opt.value = barcode;
       listbox.options.add(opt); 
    }
}

Answer 3

检查选项列表中是否已存在输入值。如果不存在，则添加该值，否则不执行任何操作。

let found;

const submitBtn = document.querySelector('button');

submitBtn.addEventListener('click', function(e) {
    e.preventDefault();
    
    const val = document.querySelector('input').value.toLowerCase();

    if(val.length > 0) {
        const optionsArr  = document.querySelectorAll('select > option');
        found = [...optionsArr].filter((option) => option.value.toLowerCase() === val);
        if(found.length == 0) {
            addToList(val);
        }
    }
});

function addToList(val) {
    const option = document.createElement('option');
    option.value = val;
    option.textContent = val;
    document.querySelector('select').appendChild(option);
}

<input type="text">
<button>Add</button>

<select name="" id="">
    <option value="usa">USA</option>
    <option value="Japan">Japan </option>
</select>

Answer 4

这是一个示例，您可以使用将某些元素保留在内存中并使用Array.filter作为验证策略。另外，对于过滤器，您看到的是我展示的Arrow Functions示例来过滤重复项。

let list = document.getElementById('lstBox1');
let input = document.getElementById('barcode');
let button = document.getElementById('addOption');

function addToList() {
  let currentOptions = Array.from(list.options);
  let barcode = input.value.toUpperCase();
  let filter = currentOptions.filter(option => option.value == barcode);

  if (filter.length == 0) {
    let opt = document.createElement("option");
    opt.text = barcode;
    opt.value = barcode;
    list.options.add(opt);            
    input.value = '';  
  } else {
    alert('The value is duplicated');
  }
};

button.addEventListener('click', addToList);

<input type="text" id="barcode">
<select name="" id="lstBox1">
  <option value="TEST">TEST</option>
</select>
<button id="addOption">Add Option</button>

Answer 5

这是一种蛮力方法，但可以使用。使用jQuery吗会很简单。

1。此功能将获取所有列表文本

    function getOptTxt() {
        var x = document.getElementById("lstBox1").options.length;
        var txt = [];
        var i;
        for (i = 0; i < x; i++) {
        txt[i] += x.options[i].text;
        }
    }

2。您可以检查条形码的值，如果它不在txt数组中，或者如果该值不在txt数组中，那么您实际上可以添加新的选项元素

    var flag =0
     for (x in txt){
      if(barcode == x.toUpperCase()){
        flag =1
        break;
       }
     }
    if(flag == 0){
      var opt = document.createElement("option");
      document.getElementById("lstBox1").options.add(opt);
     }

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

5 个答案: