我对编码非常陌生，因此如果这是一个愚蠢的问题，我已经感到抱歉。我想比较四个包含所有国家/地区列表的数据列表。用户应在第一个数据列表中选择一个国家。如果用户在第二个，第三个或第四个数据列表中选择了相同的国家，我想在下面显示第一个数据列表的国家。如果第二，第三或第四数据列表的所选国家/地区与第一数据列表的国家/地区不匹配，我想在下面显示第四数据列表的所选国家/地区。
我希望你们能理解我想说的话。
我非常感谢您的帮助。
谢谢！
这是我到目前为止的内容：
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;
}<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> 在您的示例中查看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>