比较多个数据列表并显示不同的结果

Question

我对编码很陌生，所以如果这是一个愚蠢的问题，我已经很抱歉了。我想比较四个数据列表，它们都包含所有国家的列表。用户应在第一个数据列表中选择一个国家/地区。如果用户在第二个，第三个或第四个数据列表中选择相同的国家/地区，我想在下面显示第一个数据列表的国家/地区。如果第二、第三或第四个数据列表的选定国家/地区与第一个数据列表的国家/地区不匹配，我想在下面显示第四个数据列表的所选国家/地区。

我希望你们明白我想说什么。

我非常感谢任何帮助。

提前致谢！

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

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

  // compare the list

  if (inputs1[0].value == inputs1[1].value || inputs1[0].value == inputs1[2].value || inputs1[0].value == inputs1[3].value){

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

  } else {

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

  }

}

.fragen {display: none;}

.showing {display: block;

}

Answer 1

从您的示例中查看此处的 JavaScript。HTML 和 CSS 保持不变。您必须在每个结果中采取除登录到控制台以外的条件。const inputNames = [1,2,3,4].map(n => `country${n}`);const inputElem = inputNames.map(c => document.getElementsByName(c)[0]);inputElem.forEach(el => {&nbsp; el.addEventListener('change', handleChange);});function handleChange() {&nbsp; const first = inputElem[0];&nbsp; const last = inputElem[inputElem.length -1];&nbsp; const middle = inputElem.filter(el => el !== first && el !== last);&nbsp; const middleValues = middle.map(el => el.value);&nbsp; if (first.value && middleValues.includes(first.value)) {&nbsp; &nbsp; console.log(`Show first country: ${first.value}`);&nbsp; } else if (last.value) {&nbsp; &nbsp; console.log(`Show last country: ${last.value}`);&nbsp; } else {&nbsp; &nbsp; console.log(`No conditions met...`);&nbsp; }}.fragen {display: none;}.showing {display: block;}<div id="response3no" class="showing">&nbsp; &nbsp; <h3>In welchem Staat sind die folgenden Orte? </h3>&nbsp; &nbsp; &nbsp;Sitz / gewöhnlicher Aufenthalt des Beförderers:&nbsp;&nbsp; &nbsp; &nbsp;<form>&nbsp; &nbsp; &nbsp; <input type="search" name ="country1" list="country">&nbsp; &nbsp; &nbsp; <datalist id="country">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option value="Afghanistan">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Ägypten">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Albanien">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Algerien">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Andorra">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Angola">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Antigua und Barbuda">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Äquatorialguinea">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Argentinien">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Armenien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Aserbaidschan">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Äthiopien">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Australien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Bahamas">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Bahrain">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Bangladesch">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Barbados">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Belarus">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <option value="Belgien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Belize">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Benin">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Bhutan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Bolivien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Bosnien und Herzegowina">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Botsuana">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Brasilien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Brunei Darussalam">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Bulgarien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Burkina Faso">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Burundi">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Cabo Verde">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Chile">&nbsp; &nbsp; &nbsp; &nbsp; <option value="China">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Cookinseln">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Costa Rica">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Côte d'Ivoire">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Dänemark">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Deutschland">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Dominica">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Dominikanische Republik">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Dschibuti">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Ecuador">&nbsp; &nbsp; &nbsp; &nbsp; <option value="El Salvador">&nbsp; &nbsp; &nbsp; &nbsp; <option value=Eritrea>&nbsp; &nbsp; &nbsp; &nbsp; <option value="Estland">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Eswatini">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Fidschi">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Finnland">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Frankreich">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Gabun">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Gambia">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Georgien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Ghana">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Grenada">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Griechenland">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Großbritannien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Guatemala">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Guinea">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Guinea-Bissau">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Guyana">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Haiti">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Honduras">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Indien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Indonesien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Irak">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Iran">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Irland">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Island">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Israel">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Italien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Jamaika">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Japan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Jemen">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Jordanien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kambodscha">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kamerun">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kanada">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kasachstan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Katar">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kenia">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kirgistan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kiribati">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kolumbien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Komoren">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kongo">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kongo, Demokratische Republik">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Korea, Demokratische Volksrepublik">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Korea, Republik">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kosovo">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kroatien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kuba">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Kuwait">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Laos">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Lesotho">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Lettland">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Libanon">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Liberia">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Libyen">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Liechtenstein">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Litauen">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Luxemburg">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Madagaskar">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Malawi">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Malaysia">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Malediven">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Mali">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Malta">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Marokko">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Marshallinseln">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Mauretanien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Mauritius">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Mexiko">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Mikronesien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Moldau">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Monaco">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Mongolei">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Montenegro">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Mosambik">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Myanmar">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Namibia">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Nauru">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Nepal">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Neuseeland">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Nicaragua">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Niederlande">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Niger">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Nigeria">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Nordmazedonien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Norwegen">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Oman">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Österreich">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Pakistan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Palau">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Panama">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Papua-Neuguinea">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Paraguay">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Peru">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Philippinen">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Polen">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Portugal">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Ruanda">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Rumänien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Russische Föderation">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Salomonen">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Sambia">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Samoa">&nbsp; &nbsp; &nbsp; &nbsp; <option value="San Marino">&nbsp; &nbsp; &nbsp; &nbsp; <option value="São Tomé und Príncipe">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Saudi-Arabien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Schweden">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Schweiz">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Senegal">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Serbien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Seychellen">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Sierra Leone">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Simbabwe">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Singapur">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Slowakei">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Slowenien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Somalia">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Spanien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Sri Lanka">&nbsp; &nbsp; &nbsp; &nbsp; <option value="St. Kitts und Nevis">&nbsp; &nbsp; &nbsp; &nbsp; <option value="St Lucia">&nbsp; &nbsp; &nbsp; &nbsp; <option value="St. Vincent und die Grenadinen">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Südafrika">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Sudan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Südsudan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Suriname">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Syrien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Tadschikistan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Taiwan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Tansania">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Thailand">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Timor-Leste">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Togo">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Tonga">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Trinidad und Tobago">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Tschad">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Tschechische Republik">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Tunesien">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Türkei">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Turkmenistan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Tuvalu">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Uganda">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Ukraine">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Ungarn">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Uruguay">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Usbekistan">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Vanuatu">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Vatikanstadt">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Venezuela">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Vereinige Arabische Emirate">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Vereinigte Staaten">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Vietnam">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Zentralafrikanische Republik">&nbsp; &nbsp; &nbsp; &nbsp; <option value="Zypern">&nbsp; &nbsp; &nbsp; </datalist>&nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp;Sitz / gewöhnlicher Aufenthalt des Absenders&nbsp;&nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; <input type="search" name ="country2" list="country">&nbsp; &nbsp; &nbsp; <datalist id="country">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </datalist>&nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp;Übernahmeort der Güter&nbsp;&nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; <input type="search" name ="country3" list="country">&nbsp; &nbsp; &nbsp; <datalist id="country">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </datalist>&nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp;Ablieferungsort der Güter&nbsp; &nbsp; &nbsp;<form>&nbsp; &nbsp; &nbsp; <input type="search" name ="country4" list="country">&nbsp; &nbsp; &nbsp; <datalist id="country">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </datalist>&nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; <br></div><div id="ebene2" class="fragen">&nbsp; &nbsp; <span id="firstcountry"></span></div><div id="ebene3" class="fragen">&nbsp; &nbsp; <span id="lastcountry"></span>&nbsp; &nbsp;</div>&nbsp;