我如何解决我的选择选项的问题?

Question

我创建了一个足球队成员数组。所有的球员都列在这里。这个数组是按类别(位置)筛选的。例如，当你选择一个前锋，前锋球员排名。但当我再次按下"选择"选项时，所有玩家都应该可见。我什么也没看见。也就是说，当默认情况下再次选择select选项时，应该对所有选项进行排序。有什么问题吗?我该给"学生"什么呢?选项，以便当我选择它时，默认情况下将显示整个数组。请帮我修复我的代码

const team_list=[
{
"id": 1,
"name": "Altay Bayındır",
"number": "#1",
"position": "Kaleci",
"image": "assets/image/altayportre.png",
},
{
"id": 2,
"name": "İrfan Can Eğribayat",
"number": "#70",
"position": "Kaleci",
"image": "assets/image/irfancan_portre.png",
},
{
"id": 3,
"name": "Osman Ertuğrul Çetin",
"number": "#54",
"position": "Kaleci",
"image": "assets/image/etoportre_1.png",
},
{
"id": 4,
"name": "Atilla Szalai",
"number": "#41",
"position": "Defans",
"image": "assets/image/atiportre.png",
},
{
"id": 5,
"name": "Serdar Aziz",
"number": "#4",
"position": "Defans",
"image": "assets/image/serdarportre.png",
},
{
"id": 6,
"name": "Gustavo Henrique",
"number": "#2",
"position": "Defans",
"image": "assets/image/gustavoprorte.png",
},
{
"id": 7,
"name": "Luan Peres",
"number": "#28",
"position": "Defans",
"image": "assets/image/peresportre.png",
},
{
"id": 8,
"name": "Bright Osayi-Samuel",
"number": "#21",
"position": "Defans",
"image": "assets/image/osayiportre.png",
},
{
"id": 9,
"name": "Samet Akaydın",
"number": "#3",
"position": "Defans",
"image": "assets/image/Shape.png",
},
{
"id": 10,
"name": "Ferdi Kadıoğlu",
"number": "#7",
"position": "Defans",
"image": "assets/image/ferdiportre.png",
},
{
"id": 11,
"name": "Ezgjan Alioski",
"number": "#6",
"position": "Defans",
"image": "assets/image/alioskivesikalik.png",
},
{
"id": 12,
"name": "Mauricio Lemos",
"number": "#29",
"position": "Defans",
"image": "assets/image/lemosportre.png",
},
{
"id": 13,
"name": "Nazım Sangare",
"number": "#30",
"position": "Defans",
"image": "assets/image/nazimportre.png",
},
{
"id": 14,
"name": "Çağatay Kurukalıp",
"number": "#33",
"position": "Defans",
"image": "assets/image/cagtaykurkalip_portre.png",
},
{
"id": 15,
"name": "Willian Arao",
"number": "#5",
"position": "Ortasaha",
"image": "assets/image/araoportre.png",
},
{
"id": 16,
"name": "Miguel Crespo",
"number": "#27",
"position": "Ortasaha",
"image": "assets/image/crespoportre.png",
},
{
"id": 17,
"name": "Mert Hakan Yandaş",
"number": "#8",
"position": "Ortasaha",
"image": "assets/image/mertportre.webp",
},
{
"id": 18,
"name": "Miha Zajc",
"number": "#26",
"position": "Ortasaha",
"image": "assets/image/zajcportre.webp",
},
{
"id": 19,
"name": "İrfan Can Kahveci",
"number": "#17",
"position": "Ortasaha",
"image": "assets/image/kahveciportre.webp",
},
{
"id": 20,
"name": "Arda Güler",
"number": "#10",
"position": "Ortasaha",
"image": "assets/image/ardaportre.webp",
},
{
"id": 21,
"name": "Lincoln Henrique",
"number": "#18",
"position": "Ortasaha",
"image": "assets/image/lincolnportre.webp",
},
{
"id": 22,
"name": "Armindo  Bruma",
"number": "#22",
"position": "Ortasaha",
"image": "assets/image/brumaportre.webp",
},
{
"id": 23,
"name": "İsmail Yüksek",
"number": "#80",
"position": "Ortasaha",
"image": "assets/image/ismailportre.webp",
},
{
"id": 24,
"name": "Emre Mor",
"number": "#9",
"position": "Ortasaha",
"image": "assets/image/emreportre.webp",
},
{
"id": 25,
"name": "Isak Vural",
"number": "#16",
"position": "Ortasaha",
"image": "assets/image/isakportre.webp",
},
{
"id": 26,
"name": "Diego Rossi",
"number": "#9",
"position": "Forvet",
"image": "assets/image/rossiportre.webp",
},
{
"id": 27,
"name": "Enner Valencia",
"number": "#13",
"position": "Forvet",
"image": "assets/image/valencia.webp",
},
{
"id": 28,
"name": "Joao Pedro",
"number": "#20",
"position": "Forvet",
"image": "assets/image/portrefutbolcular-(18).webp",
},
{
"id": 29,
"name": "Joshua King",
"number": "#15",
"position": "Forvet",
"image": "assets/image/kingportre.webp",
},
{
"id": 30,
"name": "Michy Batshuayi",
"number": "#23",
"position": "Forvet",
"image": "assets/image/michy_basthuayi.webp",
},
{
"id": 31,
"name": "Serdar Dursun",
"number": "#19",
"position": "Forvet",
"image": "assets/image/dursunportre.webp",
}
];

const { localStorage } = window;
const new_player_list = team_list.map(row => {
return {
id: row.id,
image: row.image,
position: row.position,
name: row.name,
number: row.number
}
});
let card_item = '';
let all_team = document.getElementsByClassName('all_team');
for (let player of new_player_list) {
card_item += `<div class="card col-lg-3 col-md-6 col-sm-6 col-12" style="width: 18rem;">
<img class="card-img-top" src="${player.image}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">${player.name}</h5>
<p class="card-text">${player.position}</p>
<span class="number-player">${player.number}</span>
</div>
</div>`
}
all_team[0].innerHTML = card_item;
let position_data = [
{ position: "Kaleci" },
{ position: "Defans" },
{ position: "Ortasaha" },
{ position: "Forvet" }
]
let position_select = document.querySelector('#position_select');
let option = `<option value=''>Secin</option>`;

for (let row of position_data) {
option += `<option>${row.position}</option>`;
}
position_select.innerHTML = option;
function getValue(current_input) {
const { value } = current_input;
let card_item2 = '';
let find_player_data = team_list.filter(row => row.position == value);
for (let player of find_player_data) {
card_item2 += `<div class="card col-lg-3 col-md-6 col-sm-6 col-12" style="width: 18rem;">
<img class="card-img-top" src="${player.image}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">${player.name}</h5>
<p class="card-text">${player.position}</p>
<span class="number-player">${player.number}</span>
</div>
</div>`
}
all_team[0].innerHTML = card_item2;
}

Answer 1

我认为这里的解决方案是，你没有重置all_team元素的innerHTML当"secin"选项被选中。添加逻辑来检查select元素的值是否等于"secin"然后重置元素的innerHTML。这应该会让它们都以你想要的方式显示。

if (value === "secin") {
all_team[0].innerHTML = card_item;
}