如何将单击项的列表添加到输入字段并能够检索它们？

Question

目前，我单击国家/地区，并将其专有名称添加到输入字段中，我这样做是因为我需要将输入值发送到后端。 这是我可能要点击的许多国家，所以这是我目前对一个国家/地区所做的操作：

<input type="text" id="usp-custom-3">

function zoomToFeature(e) {
        this.getElement().classList.toggle('active');
        var name = e.target.feature.properties.name;
        jQuery("#usp-custom-3").val(name);
  }

  function onEachFeature(feature, layer) {
    layer.on({
      click: zoomToFeature
    });
  }

使用this.getElement().classList.toggle('active'); 我的意思是当我单击国家/地区多边形时。 正如我说的那样，我可能会点击多个国家/地区，那么如何在input添加多个国家/地区名称，例如“ Italy France Spain”，并且如果我们再次单击它，便能够删除它们？

Answer 1

保留一个数组并显示出来？

var selected=[];
function zoomToFeature(e) {
    this.getElement().classList.toggle('active');
    var name=e.target.feature.properties.name;
    var i;
    if((i=selected.indexOf(name))+1){//check if existing
       selected.splice(i,1);//remove
    }else{
       selected.push(name);//add
    }
    jQuery("#usp-custom-3").val(selected.join("<br>"));//show with each being in a new row
 }

function onEachFeature(feature, layer) {
layer.on({
  click: zoomToFeature
});
}

Answer 2

大概是这样的：

 const i = document.querySelector('input'); const els = document.querySelectorAll('p'); for (const el of els) { el.addEventListener('click', function() { const v = i.value.split(' '); // get countries inside input value if (!v.includes(el.textContent)) { // if not already in the input field i.value = v.concat(el.textContent).join(' '); // add a new text } else { i.value = v.filter(text => text !== el.textContent).join(' '); // remove if already there } }) } 

 <div> <p>Italy</p> <p>Spain</p> <p>Germany</p> </div> <input type="text">