我想将我的 json 数据插入到两个<select>标签中。第一个下拉列表包含专辑，第二个下拉列表应包含与所选专辑关联的曲目。第一个下拉列表正确填充了我的 json 数据，但我无法弄清楚为什么第二个下拉列表不会完全填满提供的数据。最终结果应该是： - 用户选择专辑 ->用户选择曲目 ->曲目将自动在iframe中播放YouTube视频。
任何帮助都是非常受欢迎的，因为我对这一切仍然很陌生。
.HTML：
<body>
<form oninput="play(track.value)">
<div>Band:
<select id="artiest">
</select>
</div>
<br>
<div>Track:
<select id="tracks">
</select>
</div>
<script>main()</script>
</form>
<iframe width="520" height="280" id="player" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" src=""></iframe>
</body>
杰森：
[
{
"id" : "1", "artiest" : "A$AP Rocky", "name" : "Testing",
"tracks" : [
{"url" : "https://www.youtube.com/embed/yEG2VTHS9yg", "titel" : "L$D", "duration" : "3:58"},
{"url" : "https://www.youtube.com/embed/Kbj2Zss-5GY", "titel" : "Praise The Lord", "duration" : "3:25"}
]
},
{
"id" : "2", "artiest" : "A$AP Rocky", "name" : "AT.LONG.LAST.A$AP",
"tracks" : [
{"url" : "https://www.youtube.com/embed/ZJM4AQSbZDk", "titel" : "Love$ick", "duration" : "3:12"},
{"url" : "https://www.youtube.com/embed/KfVIRigPyws", "titel" : "Everyday", "duration" : "4:21"}
]
},
{
"id" : "3", "artiest" : "Travis Scott", "name" : "Birds In The Trap Sing McKnight",
"tracks" : [
{"url" : "https://www.youtube.com/embed/Dst9gZkq1a8", "titel" : "Goosebumps", "duration" : "4:04"},
{"url" : "https://www.youtube.com/embed/tfSS1e3kYeo", "titel" : "Highest in the room", "duration" : "2:56"}
]
},
{
"id" : "4", "artiest": "Travis Scott", "name" : "ASTROWORLD",
"tracks" : [
{"url" : "https://www.youtube.com/embed/_EyZUTDAH0U", "titel" : "BUTTERFLY EFFECT", "duration" : "3:11"},
{"url" : "https://www.youtube.com/embed/6ONRf7h3Mdk", "titel" : "SICKO MODE", "duration" : "5:13"}
]
}
]
.JS：
// Request
async function getJson(url) {
let response = await fetch(url);
return response.json();
}
async function main() {
let artist = await getJson("jukebox.json");
let options = "";
for (var a in artist) {
options += "<option>" + artist[a].artiest + ":" + artist[a].name + "</option>";
}
document.getElementById("artiest").innerHTML = options;
await showTracks(artist[0].tracks);
artiest.addEventListener("change", function(ev){
showTracks(artiest.value)
})
}
main();
async function showTracks(id) {
let artist = await getJson('jukebox.json');
for (let i = 0; i < artist.length; i++){
var data = artist[i].tracks;
var urls = "";
for (var a = 0; i < 2; a++) {
//urls += '<option>' + data[a].url + '</option>';
document.getElementById('tracks').innerHTML += '<option>' + data[a].titel + "" + data[a].duration + '</option>';
}}
}
编辑：
async function main() {
let artist = await getJson("jukebox.json");
let options = "";
for (let a =0; a < artist.length; a++) {
options += "<option>" + artist[a].artiest + ": " + artist[a].name + "</option>";
}
document.getElementById("artiest").innerHTML = options;
await showTracks(artist[0].artiest);
document.getElementById("artiest").addEventListener("change", function(){
var x = document.getElementById("artiest").selectedIndex;
showTracks(x.index)
});
}
async function showTracks(artiest) {
let artist = await getJson("jukebox.json", function () {
});
let data = artist.filter(el => el.artiest === artiest)[0].tracks;
for (let a = 0; a < artist.length; a++) {
document.getElementById("tracks").innerHTML += "<option>" + data[a].titel + ": " + data[a].duration + "</option>";
}
}
这些是阻止轨道select工作的问题：
showTracks不利用其参数- 您正在传递
showTracksArray曲目，但该函数不使用其参数 - 您正在传递
showTracksselect的value，其选项未明确定义value道具。你最好使用select.selectedIndex而不是在那里select.value：https://www.w3schools.com/jsref/dom_obj_select.asp -
showTracks的逻辑需要修改。它需要执行以下操作：-
取艺术家的索引(从 0 到 3 的数字)
-
使用给定索引获取艺术家的曲目
-
清空轨道选择器的内容
-
对于所选艺术家曲目中的每个曲目，创建一个将选项附加到曲目选择器。
-
一些建议：
- 使用
document.createElement而不是处理element.innerHTML。您的代码将更容易理解：https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement - 查看循环方法(特别是 of 和 for in)：
// Request
async function getJson(url) {
let response = await fetch(url);
return response.json();
}
async function main() {
let artist = await getJson("jukebox.json");
let options = "";
for (var a in artist) {
options += "<option>" + artist[a].artiest + ":" + artist[a].name + "</option>";
}
document.getElementById("artiest").innerHTML = options;
await showTracks(artist[0].tracks); // See note 2)
artiest.addEventListener("change", function(ev){
showTracks(artiest.value) // See note 3)
})
}
main();
async function showTracks(id) { // See note 1)
let artist = await getJson('jukebox.json');
for (let i = 0; i < artist.length; i++){
var data = artist[i].tracks;
var urls = "";
for (var a = 0; i < 2; a++) {
//urls += '<option>' + data[a].url + '</option>';
document.getElementById('tracks').innerHTML = '<option>' + data[a].titel + "" + data[a].duration + '</option>';
}}
}