Question

从.js文件中，我获取了相册的名称，并使用此功能将它们加载到选择菜单中：

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

我现在需要做的是将该专辑中的歌曲加载到另一个选择框中。我尝试了以下方法：

此函数使用loadToSelect选择加载文件的“歌曲”部分，并根据曲目数创建一个选项菜单

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

下一个功能应该是获取所选专辑的索引并相应加载歌曲

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

最后，我将这些称为启动函数

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

到目前为止，将相册加载到文本框中是有效的，但加载歌曲似乎不起作用，任何帮助或建议都会受到赞赏

编辑：我应该提到我不允许使用JQuery。

Answer 1

享受

＆＃13;

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

＆＃13;

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

＆＃13;

从HTML / Javascript中的另一个动态创建的选择中动态创建选择框

1 个答案: