如何正确地将 json 结果附加到选择选项答案

【问题标题】：How to properly append json result to a select option如何正确地将 json 结果附加到选择选项
【发布时间】：2020-12-28 14:26:42
【问题描述】：

如何正确地将 json 结果附加到选择选项，

示例 json 数据

Ajax 代码：

$.ajax({
        url: 'sessions.php',
        type: 'post',
        datatype: 'json',
        data: { from: $('#datepicker_from').val().trim(), to: $('#datepicker_to').val().trim() },
        sucess: function(data){
            var toAppend = '';
            //if(typeof data === 'object'){
                for(var i=0;i<data.length;i++){
                    toAppend += '<option>'+data[i]['id']+'</option>';
                }
            //}
            $('#sessions').append(toAppend);
        }
    });

html代码：

<p>Sessions: 
<select id="sessions"></select>

我已经设置了我的 php 文件

header("Content-Type: application/json");

【问题讨论】：

标签： json jquery

【解决方案1】：

使用 $.each 遍历您从 ajax 调用收到的 JSON 数组。

注意：-success的拼写，你写的是sucess。

 success: function(data){
            var toAppend = '';
           $.each(data,function(i,o){
           toAppend += '<option>'+o.id+'</option>';
          });

         $('#sessions').append(toAppend);
        }

您可以直接在每个循环内附加到 DOM，但最好与字符串连接，然后稍后再添加到 DOM。 这是一个更便宜的操作，因为在这种情况下您只访问 DOM 一次。不过，这可能不适用于某些复杂的场景。

【讨论】：

有什么错误吗？是不进入循环还是不附加到 Select 选项？

【解决方案2】：

success: function(data) {
     var options = "";
     for (var i = 0; i < data.length; i++) {
         options += "<option>" + data[i].id + "</option>";
     }
     $("#sessions").html(options);
 }

如果你的响应是多维数组，那么尝试如下

success: function(data) {
    var options = '';
    for (var i = 0; i < data.length; i++) {
        for (var j = 0; j< data[i].length; j++){
            options += '<option value="' + data[i][j].product_id + '">' + data[i][j].name + '</option>';
        }
    }
    $("#products").html(options);
}

【讨论】：

【解决方案3】：

希望对你有所帮助

for(i=0; i<data.length; i++) {
    $('#sessions').append("<option value="+data[i].id+"/option>");                      
        }

【讨论】：

【解决方案4】：

让你在参数data中接收json数据

var obj = JSON.parse(data);
for(i=0; i<data.length; i++) {
    $('#sessions').append("<option value="+obj[i].id+">"+obj[i].name+"</option>");                      
}

【讨论】：

【解决方案5】：

请尝试以下代码，这可能会对您有所帮助。

我在 Spring Boot MVC 中使用的这些代码

JSON 数据

[{"name":"Afghanistan","code":"af"},
{"name":"Albania","code":"al"},
{"name":"Algeria","code":"dz"}]

JQuery 代码

var jsonData = '${restData}';
var obj = JSON.parse(jsonData);
for (i in obj) {
$('#selectList').append(new Option(obj[i].name, obj[i].code));
}

【讨论】：