根據另一個下拉列表動態更改下拉列表的值

Question

我有兩個下拉列表，其中一個顯示團隊列表，另一個更新值以顯示該團隊的所有球員。

這是我當前的代碼：

// Creating list with all teams
var list1 = document.getElementById("list1");
for (var i = 0; i <= 19; i++) {
      var a = document.createElement("OPTION");
      a.setAttribute("value", data.teams[i].code);
      var a1 = document.createTextNode(data.teams[i].name);
      a.appendChild(a1);
      list1.appendChild(a);
}
// Getting selected value of list 1
var option1 = list1.options[list1.selectedIndex].value;

// searching through json array and displaying only players from that team
data.elements.forEach(element => {

    if(element.team_code == option1) {
          var a = document.createElement("OPTION");
          a.setAttribute("value", element.web_name);
          var a1 = document.createTextNode(element.first_name + " " + element.second_name);
          a.appendChild(a1);
          players1.appendChild(a);
    }
});

我的代碼在選擇球隊時顯示正確的球員，但是如果我在球隊列表中選擇另一個值，它不會相應地更新球員列表。

任何想法如何做到這一點？

Answer 1

在選擇時使用 onchange

<select onchange="changeInTeam()">

和

function changeInTeam(value){
  let x=data.elements.filter((element) => element.team_code == value);
  if(x.length==0){
    return;
  }
  playerList.innerHTML="";
  x.forEach( (player)=>{
       let  a = document.createElement("OPTION");
          a.setAttribute("value", player.first_name);
          var a1 = document.createTextNode(player.first_name);
          a.appendChild(a1);
          playerList.appendChild(a);

  });
}

運行此代碼片段

 var data={ teams:[ { name:"FC Barcelona", code:"FCB" }, { name:"Juventus", code:"JV" }, { name:"Real Madrid", code:"RM" } ], elements:[ { first_name:"Messi", second_name:"", web_name:"", team_code:"FCB" }, { first_name:"Suarez", second_name:"", web_name:"", team_code:"FCB" }, { first_name:"Ronaldo", second_name:"CB", web_name:"", team_code:"JV" }, { first_name:"Paulo", second_name:"", web_name:"", team_code:"JV" }, { first_name:"Karim Benzema", second_name:"", web_name:"", team_code:"RM" }, { first_name:"Gareth Bale", second_name:"", web_name:"", team_code:"RM" }, ] }; var teamList =document.getElementById("teamlist"); var playerList =document.getElementById("playerslist"); for (let i = 0; i < 3; i++) { let a = document.createElement("OPTION"); a.setAttribute("value", data.teams[i].code); let a1 = document.createTextNode(data.teams[i].name); a.appendChild(a1); teamList.appendChild(a); if(i==0){ changeInTeam(data.teams[i].code)//for setting the second select initially } } function changeInTeam(value){ let x=data.elements.filter((element) => element.team_code == value); if(x.length==0){ return; } playerList.innerHTML=""; x.forEach( (player)=>{ let a = document.createElement("OPTION"); a.setAttribute("value", player.first_name); var a1 = document.createTextNode(player.first_name); a.appendChild(a1); playerList.appendChild(a); }); }

 Teams: <select id="teamlist" onchange="changeInTeam(value)"> </select> Players: <select id="playerslist"> </select>