Ajax响应JSON数据在html中选择框

时间:2017-04-01 14:21:41

标签: php jquery json ajax multidimensional-array

下面是我的ajax调用,我得到的是JSON数据

$.ajax ({
            type: "POST",
            url: "getrecieverlist.php",
            data: { strSenderID: sendmeid },
            success: function (r) { 
            }
       });   

我得到的回应是

以下的JSON数据
{
 "receiverDetails": [
{
  "receiver_id": "55555",
  "name": "Nitin",
  "mobile": "7777777777",
  "ifsc_code": "IFSC54545",
  "acc_no": "16-01-2017"
},
{
  "receiver_id": "66666",
  "name": "Vikram",
  "mobile": "9191919191",
  "ifsc_code": "IFSC54545",
  "acc_no": "13-01-2017"
}
],
 "success": 1
 }      

我的选择框html代码在

之下
<select id="recieverlist" name="select" class="main-form">
      <option value="">None Selected</option>
    </select>

我想要的是填充选择框选项,其中文本作为JSON数据的名称和选项的值为receiverid,我尝试了很多东西,但没有找到我需要正确的指导如何做? / p>

2 个答案:

答案 0 :(得分:1)

尝试跟随。

success : function (r) {
    var data = r.receiverDetails;
    var options = '';

    for(var i=0; i<data.length; i++) { // Loop through the data & construct the options
        options += '<option value="'+data[i].receiver_id+'">'+data[i].name+'</option>';
    }

    // Append to the html
    $('#recieverlist').append(options);
}

答案 1 :(得分:0)

您还可以使用$ .each功能。

                $.each(data.receiverDetails, function(index, value)
                    $("#recieverlist").append('<option value="'+value.receiver_id+'">'+value.name+'</option>');
                  });