は動的に.jsファイルから

Question

、私はアルバムの名前を取得し、この機能を利用して選択メニューにそれらをロードしていますHTML/JavaScriptで別の動的に作成された選択から選択ボックスを作成：

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

何これまでのテキストボックスにアルバムをロードしているが、曲をロードする、任意のヘルプやアドバイスをいただければ幸いです

EDITを動作していないように動作します：私は、私は何がjQueryのを使用させて頂いておりません言及する必要があります。

Answer 1

は

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>