使用 Javascript 比较多个数据列表的值

Question

首先，我对编码很陌生，所以很抱歉，如果这是一个愚蠢的问题。我创建了一个包含所有国家/地区的数据列表 现在我希望Javascript检查用户是否在不同的列表中选择了相同的国家/地区。

我该怎么做？

这是我到目前为止所拥有的：

var inputs1 = document.getElementsByName('country1','country2','country3','country4'),

    country1, country2, country3, country4;

for (var i = 0; i < inputs1.length; i++) {

  var el = inputs1[i];

  el.addEventListener('change', function() {

    compareLists(this.value);

  })

}

function compareLists(country1,country2,country3,country4) {

  if (country1 == country2) {

    document.getElementById("ebene2").classList.add('showing');

    document.getElementById("ebene3").classList.remove('showing');

}else  {

    document.getElementById("ebene3").classList.add('showing');

    document.getElementById("ebene2").classList.remove('showing');

}}

<div>

    <h3>In welchem Staat sind die folgenden Orte? </h3>

     Sitz / gewöhnlicher Aufenthalt des Beförderers: 

     <form>

      <input type="search" name ="country1" list="country">

      <datalist id="country">

      </datalist>

  </form>

        <br>

     Sitz / gewöhnlicher Aufenthalt des Absenders 

    <form>

      <input type="search" name ="country2" list="country">

      <datalist id="country">

        

      </datalist>

    </form>

        <br>

     Übernahmeort der Güter 

    <form>

      <input type="search" name ="country3"list="country">

      <datalist id="country">

        

      </datalist>

    </form>

        <br>

     Ablieferungsort der Güter

     <form>

      <input type="search" name ="country4" list="country">

      <datalist id="country">

        

      

      </datalist>

    </form>

        <br>

</div>

Answer 1

id 属性在整个文档中必须是唯一的。如果要对每个输入使用不同的国家/地区数据列表，则需要对每个数据列表使用不同的 ID。getElementsByName 按单个名称进行搜索。不接受多个参数。您可以为它们指定相同的名称，或者使用类。var inputs1 = ['country1', 'country2', 'country3', 'country4'].map(c => document.getElementsByName(c)[0]),&nbsp; country1, country2, country3, country4;for (var i = 0; i < inputs1.length; i++) {&nbsp; var el = inputs1[i];&nbsp; el.addEventListener('change', function() {&nbsp; &nbsp; compareLists(this.value);&nbsp; })}function compareLists() {&nbsp; var map = {};&nbsp; inputs1.forEach((i, idx) => {&nbsp; &nbsp; i.value && ((map[i.value]?.push(idx)) || (map[i.value] = [idx]));&nbsp; });&nbsp; // use an object map to collect duplicates&nbsp;&nbsp; // filter out only dupe lists > 1 in length&nbsp; map = Object.entries(map).filter(([, x]) => x.length > 1);&nbsp; console.log(map);&nbsp; // assign a different color border for each set of duped value inputs&nbsp; var colors = ['blue', 'green', 'red', 'yellow'];&nbsp; inputs1.forEach(input => input.style.border = '');&nbsp; map.forEach(([, list]) => {&nbsp; &nbsp; var color = colors.pop();&nbsp; &nbsp; list.forEach(x => inputs1[x].style.border = `1px solid blue`);&nbsp; });&nbsp; /*&nbsp; if (country1 == country2) {&nbsp; &nbsp; &nbsp; document.getElementById("ebene2").classList.add('showing');&nbsp; &nbsp; &nbsp; document.getElementById("ebene3").classList.remove('showing');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; document.getElementById("ebene3").classList.add('showing');&nbsp; &nbsp; &nbsp; document.getElementById("ebene2").classList.remove('showing');&nbsp; &nbsp; }*/}.showing {&nbsp; border: 1px solid blue}<datalist id="country">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Chocolate">&nbsp; &nbsp; <option value="Coconut">&nbsp; &nbsp; <option value="Mint">&nbsp; &nbsp; <option value="Strawberry">&nbsp; &nbsp; <option value="Vanilla">&nbsp; &nbsp; &nbsp; </datalist><div>&nbsp; <h3>In welchem Staat sind die folgenden Orte? </h3>&nbsp; Sitz / gewöhnlicher Aufenthalt des Beförderers:&nbsp; <form>&nbsp; &nbsp; <input type="search" name="country1" list="country">&nbsp; </form>&nbsp; <br> Sitz / gewöhnlicher Aufenthalt des Absenders&nbsp; <form>&nbsp; &nbsp; <input type="search" name="country2" list="country">&nbsp; </form>&nbsp; <br> Übernahmeort der Güter&nbsp; <form>&nbsp; &nbsp; <input type="search" name="country3" list="country">&nbsp; </form>&nbsp; <br> Ablieferungsort der Güter&nbsp; <form>&nbsp; &nbsp; <input type="search" name="country4" list="country">&nbsp; </form>&nbsp; <br></div>

Answer 2

在不阅读您的代码的情况下，我只是想知道您是否可以执行此操作：当用户单击一个国家/地区以数组保存该国家/地区时，然后当他单击另一个国家/地区以将该国家/地区保存在同一数组中时，只需从数组中比较这两个值？commonCountries