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>

根据另一个下拉列表动态更改下拉列表的值

1 个答案: