Dynamically change value of dropdown list depending on another dropdown list

Question

I have two dropdown lists one of them shows a list of teams and the other one updates the values to show all the players from that team.

This is my current code:

// 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);
    }
});

My code displays the correct players when selecting a team however if I select another value in the teams list it won't update the player list accordingly.

Any ideas how to do this?

M A Salman · Accepted Answer · 2020-03-26 01:07:08Z

Use onchange on select

<select onchange="changeInTeam()">

and

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

  });
}

Run this code snipet

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>

Collectives™ on Stack Overflow

Dynamically change value of dropdown list depending on another dropdown list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related