使用 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]),

  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() {

  var map = {};

  inputs1.forEach((i, idx) => {

    i.value && ((map[i.value]?.push(idx)) || (map[i.value] = [idx]));

  });

  // use an object map to collect duplicates

 

  // filter out only dupe lists > 1 in length

  map = Object.entries(map).filter(([, x]) => x.length > 1);

  console.log(map);

  // assign a different color border for each set of duped value inputs

  var colors = ['blue', 'green', 'red', 'yellow'];

  inputs1.forEach(input => input.style.border = '');

  map.forEach(([, list]) => {

    var color = colors.pop();

    list.forEach(x => inputs1[x].style.border = `1px solid blue`);

  });

  /*  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');

    }*/

}

.showing {

  border: 1px solid blue

}

<datalist id="country">

          <option value="Chocolate">

    <option value="Coconut">

    <option value="Mint">

    <option value="Strawberry">

    <option value="Vanilla">

      </datalist>

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

  </form>

  <br> Sitz / gewöhnlicher Aufenthalt des Absenders

  <form>

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

  </form>

  <br> Übernahmeort der Güter

  <form>

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

  </form>

  <br> Ablieferungsort der Güter

  <form>

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

  </form>

  <br>

</div>

Answer 2

在不阅读您的代码的情况下，我只是想知道您是否可以执行此操作：

当用户单击一个国家/地区以数组保存该国家/地区时，然后当他单击另一个国家/地区以将该国家/地区保存在同一数组中时，只需从数组中比较这两个值？commonCountries