使用 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

没有阅读你的代码，我只是想知道你是否可以这样做：

当用户点击一个国家将该国家保存在 commonCountries 数组中，然后当他点击另一个国家将该国家保存在同一个数组中并且只比较数组中的这两个值时？

Answer 2

id 属性在整个文档中必须是唯一的。如果您想为每个输入使用不同的国家/地区数据列表，则需要为每个数据列表使用不同的 ID。

getElementsByName 按单个名称搜索。不接受多个参数。
您可以给它们全部相同的名称，或者使用 class.

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>

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

Comparing values of multiple datalists using Javascript

javascript

html-datalist