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

Question

At the moment I am clicking on country regions and I adding their propriety name to an input field, i am doing this as I need to send the input value to backend. This is I could be clicking many countries, so this is what I currently do for one single country:

<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
    });
  }

With this.getElement().classList.toggle('active'); I mean when I click on a country polygon. As i said I might be clicking more than one country, so how to add more than one country name in the input like "Italy France Spain" and be able to remove them if we click again on it?

Answer 1

Keep an array and show that?

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

Probably something like this:

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