如何修复下拉选框筛选球员时默认选项不显示全部数据的问题？

问题根源 #

• 选择"Secin"选项时，其值为空字符串''，执行team_list.filter(row => row.position == value)时，会筛选position等于空字符串的球员，但所有球员的position都有有效值，因此返回空数组，导致页面无内容。
• 位置选项未显式设置value属性，虽然浏览器会默认使用选项文本作为value，但显式设置更规范，能避免潜在的兼容性问题。

修复步骤 #

1. 在getValue函数中增加判断逻辑：当value为空时，直接使用完整的team_list数组；否则筛选对应位置的球员。
2. 为位置选项添加value属性，值与选项文本一致。

修复后的完整代码 #

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>`;

// 给位置选项添加value属性
for (let row of position_data) {
    option += `<option value="${row.position}">${row.position}</option>`;
}
position_select.innerHTML = option;

function getValue(current_input) {
    const { value } = current_input;
    let card_item2 = '';
    // 判断value是否为空，为空则使用全部球员，否则筛选对应位置
    let find_player_data = value ? team_list.filter(row => row.position == value) : team_list;
    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;
}

内容的提问来源于stack exchange，提问作者Pasha