Dynamically creating select box from another dynamically created select in HTML/Javascript

Question

From a .js file, I am getting name of albums and loading them into a select menu with the use of this function:

function loadToSelect(id, list){
  for (var i in list) {
    var option = document.createElement("option");
    option.innerText = list[i].title;
    document.getElementById(id).appendChild(option);
  }
}

What I now need to do is load the songs from that album in another select box. I tried the following:

This function use loadToSelect to choose to load the "songs" part of the file and creates an options menu from the number of tracks

function loadToSongs(index) {
  loadToSelect("songs", albums[index].tracks);
  document.getElementById("songs").size = albums[index].tracks.length;
}

The next function is supposed to get the index of the selected album and load the songs accordingly

function songsFromAlbum () {
  loadToSongs(getElementById("albums").selectedIndex);
}

Lastly, I call these to start the functions

loadToSelect ("albums", albums);
document.getElementById("albums").onchange= songsFromAlbum()

What works so far is loading the albums into a text box, but loading the song doesn't seem to work, any help or advice would be appreciated

EDIT: I should mention I am no allowed to use JQuery.

Slonski · Accepted Answer · 2016-12-14 13:28:13Z

2

Enjoy

function loadToSelect(id, list){
  document.getElementById(id).innerHTML = '';
  for (var i in list) {
    var option = document.createElement("option");
    option.innerText = list[i].title;
    document.getElementById(id).appendChild(option);
  }
}

function loadToSongs(index) {
  loadToSelect("songs", albums[index].tracks);
}

function songsFromAlbum () {
  loadToSongs(document.getElementById("albums").selectedIndex);
}

document.getElementById("albums").addEventListener("change", function(){
  songsFromAlbum();
});


var albums = [{title: 'Red', tracks: [{title: 'Red Song 1'}, {title: 'Red Song 2'}]}, {title: 'Blue', tracks: [{title: 'Blue Song 1'}, {title: 'Blue Song 2'}]}, {title: 'Green', tracks: [{title: 'Green Song 1'}, {title: 'Green Song 2'}]}];

loadToSelect ("albums", albums);

document.getElementById("albums").onchange= songsFromAlbum()

<select id="albums"></select>

<select id="songs"></select>

answered Dec 14, 2016 at 13:28

Slonski

8345 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pete Over a year ago

Incredidble!! Thank you so much, I really appreciate it!

Collectives™ on Stack Overflow

Dynamically creating select box from another dynamically created select in HTML/Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related