如何將單擊項的列表添加到輸入字段並能夠檢索它們？

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">