Question

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

示例json数据

enter image description here

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

Answer 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一次 。但是，在某些复杂的情况下，这可能不起作用。

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

Answer 3

我希望这会帮助你追加

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

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

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

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

5 个答案: