首頁猿問使用 Javascript...

使用 Javascript 比較多個數據列表的值

JavaScript

陪伴而非守候 2022-08-27 15:19:08

首先，我對編碼很陌生，所以很抱歉，如果這是一個愚蠢的問題。我創建了一個包含所有國家/地區的數據列表現在我希望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>

查看完整描述

2 回答

波斯汪

TA貢獻1811條經驗獲得超4個贊

id 屬性在整個文檔中必須是唯一的。如果要對每個輸入使用不同的國家/地區數據列表，則需要對每個數據列表使用不同的 ID。

getElementsByName 按單個名稱進行搜索。不接受多個參數。

您可以為它們指定相同的名稱，或者使用類。

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>

<div>

<h3>In welchem Staat sind die folgenden Orte? </h3>

Sitz / gew?hnlicher Aufenthalt des Bef?rderers:

<form>

</form>

<br> Sitz / gew?hnlicher Aufenthalt des Absenders

<form>

</form>

<br> übernahmeort der Güter

<form>

</form>

<br> Ablieferungsort der Güter

<form>

</form>

<br>

</div>

反對回復 2022-08-27

繁星淼淼

TA貢獻1775條經驗獲得超11個贊

在不閱讀您的代碼的情況下，我只是想知道您是否可以執行此操作：

當用戶單擊一個國家/地區以數組保存該國家/地區時，然后當他單擊另一個國家/地區以將該國家/地區保存在同一數組中時，只需從數組中比較這兩個值？commonCountries

反對回復 2022-08-27

2 回答
0 關注
99 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 Javascript 比較多個數據列表的值

使用 Javascript 比較多個數據列表的值

2 回答

添加回答