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

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 => {

  el.addEventListener('change', handleChange);

});

function handleChange() {

  const first = inputElem[0];

  const last = inputElem[inputElem.length -1];

  const middle = inputElem.filter(el => el !== first && el !== last);

  const middleValues = middle.map(el => el.value);

  if (first.value && middleValues.includes(first.value)) {

    console.log(`Show first country: ${first.value}`);

  } else if (last.value) {

    console.log(`Show last country: ${last.value}`);

  } else {

    console.log(`No conditions met...`);

  }

}

.fragen {display: none;}

.showing {display: block;

}

<div id="response3no" class="showing">

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

         <option value="Afghanistan"> 

        <option value="Ägypten"> 

        <option value="Albanien"> 

        <option value="Algerien"> 

        <option value="Andorra"> 

        <option value="Angola"> 

        <option value="Antigua und Barbuda"> 

        <option value="Äquatorialguinea"> 

        <option value="Argentinien"> 

        <option value="Armenien">

        <option value="Aserbaidschan">  

        <option value="Äthiopien"> 

        <option value="Australien">

        <option value="Bahamas">

        <option value="Bahrain">

        <option value="Bangladesch">

        <option value="Barbados">

        <option value="Belarus"> 

        <option value="Belgien">

        <option value="Belize">

        <option value="Benin">

        <option value="Bhutan">

        <option value="Bolivien">

        <option value="Bosnien und Herzegowina">

        <option value="Botsuana">

        <option value="Brasilien">

        <option value="Brunei Darussalam">

        <option value="Bulgarien">

        <option value="Burkina Faso">

        <option value="Burundi">

        <option value="Cabo Verde">

        <option value="Chile">

        <option value="China">

        <option value="Cookinseln">

        <option value="Costa Rica">

        <option value="Côte d'Ivoire">

        <option value="Dänemark">

        <option value="Deutschland">

        <option value="Dominica">

        <option value="Dominikanische Republik">

        <option value="Dschibuti">

        <option value="Ecuador">

        <option value="El Salvador">

        <option value=Eritrea>

        <option value="Estland">

        <option value="Eswatini">

        <option value="Fidschi">

        <option value="Finnland">

        <option value="Frankreich">

        <option value="Gabun">

        <option value="Gambia">

        <option value="Georgien">

        <option value="Ghana">

        <option value="Grenada">

        <option value="Griechenland">

        <option value="Großbritannien">

        <option value="Guatemala">

        <option value="Guinea">

        <option value="Guinea-Bissau">

        <option value="Guyana">

        <option value="Haiti">

        <option value="Honduras">

        <option value="Indien">

        <option value="Indonesien">

        <option value="Irak">

        <option value="Iran">

        <option value="Irland">

        <option value="Island">

        <option value="Israel">

        <option value="Italien">

        <option value="Jamaika">

        <option value="Japan">

        <option value="Jemen">

        <option value="Jordanien">

        <option value="Kambodscha">

        <option value="Kamerun">

        <option value="Kanada">

        <option value="Kasachstan">

        <option value="Katar">

        <option value="Kenia">

        <option value="Kirgistan">

        <option value="Kiribati">

        <option value="Kolumbien">

        <option value="Komoren">

        <option value="Kongo">

        <option value="Kongo, Demokratische Republik">

        <option value="Korea, Demokratische Volksrepublik">

        <option value="Korea, Republik">

        <option value="Kosovo">

        <option value="Kroatien">

        <option value="Kuba">

        <option value="Kuwait">

        <option value="Laos">

        <option value="Lesotho">

        <option value="Lettland">

        <option value="Libanon">

        <option value="Liberia">

        <option value="Libyen">

        <option value="Liechtenstein">

        <option value="Litauen">

        <option value="Luxemburg">

        <option value="Madagaskar">

        <option value="Malawi">

        <option value="Malaysia">

        <option value="Malediven">

        <option value="Mali">

        <option value="Malta">

        <option value="Marokko">

        <option value="Marshallinseln">

        <option value="Mauretanien">

        <option value="Mauritius">

        <option value="Mexiko">

        <option value="Mikronesien">

        <option value="Moldau">

        <option value="Monaco">

        <option value="Mongolei">

        <option value="Montenegro">

        <option value="Mosambik">

        <option value="Myanmar">

        <option value="Namibia">

        <option value="Nauru">

        <option value="Nepal">

        <option value="Neuseeland">

        <option value="Nicaragua">

        <option value="Niederlande">

        <option value="Niger">

        <option value="Nigeria">

        <option value="Nordmazedonien">

        <option value="Norwegen">

        <option value="Oman">

        <option value="Österreich">

        <option value="Pakistan">

        <option value="Palau">

        <option value="Panama">

        <option value="Papua-Neuguinea">

        <option value="Paraguay">

        <option value="Peru">

        <option value="Philippinen">

        <option value="Polen">

        <option value="Portugal">

        <option value="Ruanda">

        <option value="Rumänien">

        <option value="Russische Föderation">

        <option value="Salomonen">

        <option value="Sambia">

        <option value="Samoa">

        <option value="San Marino">

        <option value="São Tomé und Príncipe">

        <option value="Saudi-Arabien">

        <option value="Schweden">

        <option value="Schweiz">

        <option value="Senegal">

        <option value="Serbien">

        <option value="Seychellen">

        <option value="Sierra Leone">

        <option value="Simbabwe">

        <option value="Singapur">

        <option value="Slowakei">

        <option value="Slowenien">

        <option value="Somalia">

        <option value="Spanien">

        <option value="Sri Lanka">

        <option value="St. Kitts und Nevis">

        <option value="St Lucia">

        <option value="St. Vincent und die Grenadinen">

        <option value="Südafrika">

        <option value="Sudan">

        <option value="Südsudan">

        <option value="Suriname">

        <option value="Syrien">

        <option value="Tadschikistan">

        <option value="Taiwan">

        <option value="Tansania">

        <option value="Thailand">

        <option value="Timor-Leste">

        <option value="Togo">

        <option value="Tonga">

        <option value="Trinidad und Tobago">

        <option value="Tschad">

        <option value="Tschechische Republik">

        <option value="Tunesien">

        <option value="Türkei">

        <option value="Turkmenistan">

        <option value="Tuvalu">

        <option value="Uganda">

        <option value="Ukraine">

        <option value="Ungarn">

        <option value="Uruguay">

        <option value="Usbekistan">

        <option value="Vanuatu">

        <option value="Vatikanstadt">

        <option value="Venezuela">

        <option value="Vereinige Arabische Emirate">

        <option value="Vereinigte Staaten">

        <option value="Vietnam">

        <option value="Zentralafrikanische Republik">

        <option value="Zypern">

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

<div id="ebene2" class="fragen">

    <span id="firstcountry"></span>

</div>

<div id="ebene3" class="fragen">

    <span id="lastcountry"></span>

   

</div>