所以说到 JavaScript,我真是个菜鸟。 我尝试了网站上的所有解决方案,并从谷歌上检查了一些其他的东西,但我没有找到任何适合我的东西。
我必须创建一个 json 数组并将其导入到选择选项列表中。目标是从列表框中选择音乐标题。
这是我当前的 html 代码(如果您需要更多代码,请告诉我,现在我将只发布我认为必要的代码):
<td><input id="anzahl" type="number" min="1" max="100"></td>
<td><select id="mySelect" name="Titel">
<option id="01"></option>
<option id="02"></option>
<option id="03"></option>
<option id="04"></option>
<option id="05"></option>
<option id="06"></option>
<option id="07"></option>
<option id="08"></option>
<option id="09"></option>
<option id="10"></option>
</select></td>
...
编辑:这是更新后的代码,但它仍然不起作用。
function initSelBox_Product() {
var titelliste= [
{"Produktid":"01","Titel":"Dangerous","Band":"David Guetta","Nettoeinzelpreis":"1.99"},
{"Produktid":"02","Titel":"Sun goes down","Band":"Robin Schulz","Nettoeinzelpreis":"1.99"},
{"Produktid":"03","Titel":"Fade out lines","Band":"The Avener","Nettoeinzelpreis":"1.99"},
{"Produktid":"04","Titel":"Walk","Band":"Kwabs","Nettoeinzelpreis":"1.99"},
{"Produktid":"05","Titel":"Blame","Band":"Calvin Harris","Nettoeinzelpreis":"1.99"},
{"Produktid":"06","Titel":"Geronimo","Band":"Sheppard","Nettoeinzelpreis":"1.99"},
{"Produktid":"07","Titel":"Animals","Band":"Maroon 5","Nettoeinzelpreis":"1.99"},
{"Produktid":"08","Titel":"What are you waiting for?","Band":"Nickelback","Nettoeinzelpreis":"1.99"},
{"Produktid":"09","Titel":"Shake it off","Band":"Taylor Swift","Nettoeinzelpreis":"1.99"},
{"Produktid":"10","Titel":"Chandelier","Band":"Sia","Nettoeinzelpreis":"1.99"} ];
for (var i = 0; i < titelliste.length; i++) {
var select = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = titelliste[i].Titel;
option.value = titelliste[i].Produktid;
select.add(option);
}
最佳答案
这是一个纯 JavaScript 选项:
var titelliste = [
{ "Produktid": "01", "Titel": "Dangerous", "Band": "David Guetta", "Nettoeinzelpreis": "1.99" },
{ "Produktid": "02", "Titel": "Sun goes down", "Band": "Robin Schulz", "Nettoeinzelpreis": "1.99" },
{ "Produktid": "03", "Titel": "Fade out lines", "Band": "The Avener", "Nettoeinzelpreis": "1.99" },
{ "Produktid": "04", "Titel": "Walk", "Band": "Kwabs", "Nettoeinzelpreis": "1.99" },
{ "Produktid": "05", "Titel": "Blame", "Band": "Calvin Harris", "Nettoeinzelpreis": "1.99" },
{ "Produktid": "06", "Titel": "Geronimo", "Band": "Sheppard", "Nettoeinzelpreis": "1.99" },
{ "Produktid": "07", "Titel": "Animals", "Band": "Maroon 5", "Nettoeinzelpreis": "1.99" },
{ "Produktid": "08", "Titel": "What are you waiting for?", "Band": "Nickelback", "Nettoeinzelpreis": "1.99" },
{ "Produktid": "09", "Titel": "Shake it off", "Band": "Taylor Swift", "Nettoeinzelpreis": "1.99" },
{ "Produktid": "10", "Titel": "Chandelier", "Band": "Sia", "Nettoeinzelpreis": "1.99" }
];
for (var i = 0; i < titelliste.length; i++) {
var select = document.getElementById("Select");
var option = document.createElement("option");
option.text = titelliste[i].Titel;
option.value = titelliste[i].Produktid;
select.add(option);
}
<select id="Select" name="Titel"></select>
从您的代码中可以明显看出您不熟悉 jQuery 的工作原理,因此我建议您坚持使用纯 JavaScript,直到您完全理解该语言本身。
我在这里做的很简单:
for (var i = 0; i < titelliste.length; i++) {
var select = document.getElementById("Select");
var option = document.createElement("option");
option.text = titelliste[i].Titel;
option.value = titelliste[i].Produktid;
select.add(option);
}
首先,我创建了一个 for
循环来遍历 titelliste
数组中包含的每个 JSON 对象。
然后,在每次迭代中:
- 我为
select
元素分配了一个变量。 - 创建一个
option
元素 - 将选项的
text
属性分配给 JSON 对象中的Titel
值 - 将选项的
value
属性分配给 JSON 对象中的Produktid
值 - 将新创建的选项添加到
select
元素
我希望这能帮助您更多地了解代码中发生的事情。
关于javascript - JSON 数组转换为 HTML 选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27364486/