我使用这个问题的公认答案来帮助我使用jQuery从JSON数组构建HTML选择菜单。
我的JSON数组是从PHP脚本中以$menu形式传递的，看起来如下：
{ "options": [
{ "id":"7","name":"Smith, John"},
{ "id":"4","name":"Jones, Tom"}
]
}
首先，我构建了我的选择菜单的框架，并将其插入页面：
var div = '<div class="row">';
var label = '<label for="employee">Employee</label>';
var select = '<select name="employee id="employee">';
var close = '</select></div>';
var menu = div + label + select + close;
$('#clicked_link').prepend(menu);
然后我尝试将$menu数组传递给jQuery，如下所示：
var json = '<?php echo $menu; ?>';
然后，我尝试将选项附加到新创建的选择菜单中，使用链接问题中的示例：
var options = eval('(' + json + ')');
var length = options.length;
for (var j = 0; j < length; j++)
{
var newOption = $('<option/>');
newOption.attr('id', options[j].id);
newOption.attr('name', options[h].name);
$('#employee').append(newOption);
}
选择菜单按预期显示，但不包含任何选项。有人能看到我在哪里犯错误吗？提前谢谢。
修订以纳入Rocket的解决方案：
var json = <?php echo $menu; ?>;
var options = json.options;
var length = options.length;
for (var j = 0; j < length; j++)
{
var newOption = $('<option/>');
newOption.attr('value', options[j].id);
newOption.attr('text', options[j].name);
$('#employee').append(newOption);
}
您不需要在此处使用eval，甚至不需要使用JSON.parse。JSON是有效的JavaScript代码。你可以这样做：
var json = <?php echo $menu; ?>; // Note: the quotes have been removed.
这将生成以下代码：
var json = { "options": [
{ "id":"7","name":"Smith, John"},
{ "id":"4","name":"Jones, Tom"}
]
};
正如您所看到的，它是有效的JavaScript代码。
然后你可以做var options = json.options。
为什么不
var options = JSON.parse(json).options;
+1对Rocket的回答，我相信你的循环中也有一个bug。线路
newOption.attr('name', options[h].list);
未定义h。您可能需要j。并且name属性在option上没有意义。对于将要显示的值，请设置text。对于提交表单时将发送到服务器的值，请设置value。