Javascript 使用嵌套的JSON动态填充select选项

我想要达到的目标

我有一个静态选择html选项，这些选项不会改变，但会决定其他选择框的输出

<select id="firstselectbox">
<option value="first">This is the first</option>
<option value="second">This is the second</option>
<option value="third">This is the third</option>
<option value="fourth">This is the fourth</option>
<option value="fifth">This is the fifth</option>
</select>

到目前为止我做了什么

问题

以下代码是locationString+=+位置[i]。名称+；正在输出身份不明的数据

然而，日志位置[i]；正在输出从静态选择框中选择的数组（第一个、第二个等）。。。然而，试图将其分离出来似乎失败了

---

当前代码正在输出未识别的代码。

请使用不引人注目的JavaScript，这样您就不必搜索像这样的错误：

$('#secondselectbox').empty()

$.each(locations, function(i, item) {
  $("<option/>",{id:locations[i].id, value:locations[i].id, text:locations[i].name})
  .appendTo('#secondselectbox')
})

---

编辑：您的JSON结构也有问题。你基本上有一个数组，它包含一个对象，因此，当您访问数组时，您的级别比您需要的级别低。

您应该首先修复json结构……它似乎是messy@RobertRozas对于我的用例，什么是理想的json文件有什么建议吗？您基本上希望选择这是第一个选择中的第一个，并用{id:名人，name:名人}，{id:distance，name:distance}…这样可以吗？？？@RobertRozas是的，但是第三层呢？我如何将静态元素与第二层连接起来？如果这样做有意义的话，当我们到达第三层时，我会迷路…那是什么…我在我的示例中看到两个类似的东西…如果我的示例可以，我可以使用它…请告诉我谢谢，但这并没有回答我的问题n、 你的代码只是在第二个选择框中输出了一个空的附加值。嗨，Bobby，谢谢你-你能给我一个正确的JSON元素的例子吗-这样我就可以指出我哪里出错了。

var datajson = {"first":[{"jesery":[{"id":"jesery","name":"Jesery","jesery":[{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"second":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"third":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"forth":[{"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"fifth":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"southeast":[{"id":"southeast","name":"South East","southeast":[{"id":"distance","name":"Distance"}]}]}]}

$("#firstselectbox").on('change', function() {
     $("select#firstselectbox").html('');
        var locations = datajson[$(this).val()];
        var locationString = '';
     $.each(locations, function(i, item) {

        console.log(locations[i]);

         locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">'  + locations[i].name + '</option>';
     });
    $('#secondselectbox').html(locationString);
});

$('#secondselectbox').empty()

$.each(locations, function(i, item) {
  $("<option/>",{id:locations[i].id, value:locations[i].id, text:locations[i].name})
  .appendTo('#secondselectbox')
})