如何解決我的 select 選項中的問題？

Question

我創建了一系列足球隊成員。 所有球員都在這里列出。 該數組按類別（位置）過濾。 比如當你 select 一個前鋒時，這個前鋒球員是有排名的。 但是當我再次按下“secin”選項時，所有玩家都應該可見。 我什么也沒看到。 即再次默認選擇select選項時，應該全部排序。 問題是什么？ 我應該給“secin”選項什么，以便當我 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

我認為這里的解決方案是在選擇“secin”選項時不重置all_team元素的 innerHTML。 添加檢查 select 元素的值是否等於“secin”的邏輯，然后重置元素的 innerHTML。這應該讓它們都以您想要的方式顯示。

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