使用嵌套 JSON 动态填充选择选项

Question

我想要达到的目标

我有一个静态选择 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>

目前，我写的代码不想输出以下内容：

选择 1：已选择选项first

选择 2：检查 jSon 文件，找到第一个和所有节点（第二层）并列出它们。当用户选择它时。

选择3：显示第三层

请注意* 是下面选择的选项 - 选择 1 是静态的，选择 2 和 3 是动态的。

Select 1    Select 2    Select 3
first*      London      Famous Famous
second      Jersey      London Famous
third       North*  
fourth      South East  
fifth       South West  
sixth       

到目前为止我做了什么

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);
});

问题？

下面的代码是locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">' + locations[i].name + '</option>';正在输出unidentified。

但是console.log(locations[i]); 正在输出从静态选择框（第一个、第二个等）中选择的数组。但是，试图将其分开似乎失败了。

当前代码正在输出unidentified。

Answer 1

使用不显眼的 JavaScript，这样您就不必寻找这样的错误：

$('#secondselectbox').empty()

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

编辑：您的 JSON 结构也存在问题。您基本上有一个包含单个对象的数组，因此当您对数组进行 foreach 时，您的位置比您需要的位置低一级。