javascript - 比较多个数据列表并显示不同的结果
问题描述
我对编码很陌生,所以如果这是一个愚蠢的问题,我已经很抱歉了。我想比较四个数据列表,它们都包含所有国家的列表。用户应该在第一个数据列表中选择一个国家。如果用户在第二个、第三个或第四个数据列表中选择相同的国家,我想在下面显示第一个数据列表的国家。如果第二个、第三个或第四个数据列表的所选国家与第一个数据列表的国家不匹配,我想在下面显示第四个数据列表的所选国家。
我希望你们明白我想说什么。
我非常感谢任何帮助。
提前致谢!
这是我到目前为止所拥有的:
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>
推荐阅读
- xslt - 当 XML 文档中有颜色时,如何在 XSL 中为 Div 添加颜色
- python - 使用 pyinstaller 编译为 .exe 后,PyQt5 应用程序中缺少图标
- hdf5 - 将 ROOT 树转换为 HDF5
- excel - Excel 中的平均时间值 - 格式 mm:ss
- uinavigationcontroller - 导航控制器中的两个不同的自定义转换
- java - 调用非静态方法的 Java 静态引用变量
- salesforce - 使用预定义的 DocuSign 模板动态创建信封
- c++ - 在 C++ 中循环遍历数组时遇到问题
- shell - 如何根据 HDFS 位置获取表名?
- c# - C# 变量作用域