javascript - 根据 JSON 结果构建选择选项

Question

我有这个 JSON:

{
   "message":"",
   "entities":[
      {
         "city":"1",
         "state":"VE.01",
         "country":"VE",
         "name":"Maroa"
      },
      {
         "city":"2",
         "state":"VE.01",
         "country":"VE",
         "name":"Puerto Ayacucho"
      },
      {
         "city":"3",
         "state":"VE.01",
         "country":"VE",
         "name":"San Fernando de Atabapo"
      }
   ]
}

我需要基于city构建一个选择选项和name结果。我有空的 HTML 选择:

<select name="city" id="city">
    <option value="-1">Select a city</option>
</select>

而且，也许我错了，但我可以从结果(存储在 data.entities javascript var 中)移动，如下所示:

$each.(data.entities, function(){
  // here I should build the options
})

但我不知道从那里去哪里，有人可以给我一些插入或建议吗？

这就是select#city的方式应该是:

<select name="city" id="city">
    <option value="-1">Select a city</option>
    <option value="1">Maroa</option>
    <option value="2">Puerto Ayacucho</option>
    <option value="3">San Fernando de Atabajo</option>
</select>

在追加新值之前清除 SELECT

所有答案都按我想要的方式工作，但请参阅我的代码:

$(".state").change(function() {
    state = $('.state option:selected').val();
    $.get(Routing.generate('cities') + '/VE/' + state).success(function(data) {
        if (data.message) {
            message = data.message;
        } else {
            $.each(data.entities, function(i, d) {
                $('#city').append('<option value="' + d.city + '">' + d.name + '</option>');
            });
        }
    }).error(function(data, status, headers, config) {
        if (status == '500') {
            message = "No hay conexión con el servidor";
        }
    });
});

我需要清理 SELECT 但保留默认选项 <option value="-1">Select one</option>在附加新值之前，我该怎么做？

Answer 1

尝试:

$('#city').empty().append('<option value="-1">Select a city</option>');
$.each(data.entities, function(i,d){  
 $('#city').append('<option value="'+d.city+'">'+d.name+'</option>');  
});

Demo