如何将json结果正确附加到选择选项 [英] How to properly append json result to a select option

问题描述

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

How to properly append json result to a select option,

样本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文件

I already set to my php file

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

推荐答案

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

Use $.each to iterate through your JSON array that you receive from ajax call.

注意:-success的拼写是sucess.

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

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

您可以在每个循环内直接将其追加到DOM，但是最好将其与字符串连接，然后再添加到DOM中. 这是一种比较便宜的操作，因为在这种情况下，您只能访问DOM .不过，在某些复杂的情况下，这可能行不通.

You can do append to the DOM directly inside the each loop but it is always better to concatenate with string and then adding to the DOM later. This is a cheaper operation since you are accessing DOM only once in this case. This might not work in some complex scenarios though.

这篇关于如何将json结果正确附加到选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！