如何从ajax响应填充下拉选项

Question

我是新来的ajax。 我想从ajax响应中填充下拉列表。 反应是医生得到的json，我想用这个列表填充下拉列表，以便管理员可以为患者选择特定的医生。

这里是我的Ajax代码：

$("button").click(function(e) { 
    e.preventDefault(); 
    var id = $(this).val(); 

    $.ajax({ 

    type: "POST", 
     url: "map/"+id, 
     data: { 
      id: $(this).val(), 
      '_token': $('input[name=_token]').val() 
     }, 
     success: function(result) { 
      console.log(result); 
     }, 
     error: function(result) { 
      alert('error'); 
     } 
    }); 

PS：我使用的console.log，所以我可以查看结果

和我laravel控制器的方法：

public function getDoctorSuggests(Request $request){ 

     $id = $request->id; 
     // Get id from database, just skiping this step there 
     $patient = Patient::find($id); 

     if ($patient instanceof Patient){ 

      //get patient location details 
      $city = $patient->city; 

      //get doctors 
      $doctors = Doctor::where('city', $city)->get(); //narrow search to city 


      if (!$doctors->isEmpty()){ 
      $distance =[]; 

      foreach($doctors as $doctor){ 
      $location = $this->distance($patient->latitude, $patient->longitude, $doctor->latitude, $doctor->longitude, 'K'); 
      array_push($distance, $location); 
      } 

      return response()->json(['doctors' => $doctors]); 
      } 

     return response()->json(['doctors' => NULL]); 
     } 
    } 

请我该怎么办得到结果，并填写一个html下拉菜单，而无需重新加载页面？

JSON响应是（从我的Chrome检查控制台得到）

Object {doctors: Array(2)}doctors: Array(2)0: Objectaddress: "29 Mambilla Street, Abuja, Nigeria"age: 2city: "Abuja"country: "Nigeria"created_at: "2017-06-14 01:01:06"currency: nulldoctor_cv: nulldoctor_mdcn: "wwjdnwe"email: "doctor@gerocare.org"firstname: "Doctor"id: 1lastname: "Doctor"latitude: 9.0805515longitude: 7.5098858midname: "Midname"phone: "9"place_id: "ChIJ2fEzeToKThARPnGlvU-PKh0"sex: 2state: "FCT"updated_at: "2017-06-14 01:08:52"zip_code: null__proto__: Object1: Objectaddress: "29 Mambilla Street, Abuja, Nigeria"age: 2city: "Abuja"country: "Nigeria"created_at: "2017-06-14 01:01:06"currency: nulldoctor_cv: nulldoctor_mdcn: "wwjdnwe"email: "doctor@gerocare.orgj"firstname: "Doctor"id: 3lastname: "Doctor"latitude: 9.0805515longitude: 7.5098858midname: "Midname"phone: "9"place_id: "ChIJ2fEzeToKThARPnGlvU-PKh0"sex: 2state: "FCT"updated_at: "2017-06-14 01:08:52"zip_code: null__proto__: Objectlength: 2__proto__: Array(0)__proto__: Object 

Answer 1

首先尝试验证，如果你的医生模型是返回的东西，然后像这样返回：

return response()->json($doctors); 

json响应将格式化您输出对象数组中的对象。

现在你可以像这个例子的波纹管一样填充组合框。

$("button").click(function(e) { 
e.preventDefault(); 
var id = $(this).val(); 
var select = $('#YourSelectBoxID'); 
$.ajax({ 

type: "POST", 
    url: "map/"+id, 
    data: { 
     id: $(this).val(), 
     '_token': $('input[name=_token]').val() 
    }, 
    success: function(data) { 
     var htmlOptions = []; 
     if(data.length){ 
       for(item in data) { 
        html = '<option value="' + data[item].id + '">' + data[item].firstname + '</option>'; 
       htmlOptions[htmlOptions.length] = html; 
       } 

       // here you will empty the pre-existing data from you selectbox and will append the htmlOption created in the loop result 
       select.empty().append(htmlOptions.join('')); 
      } 
    }, 
    error: function(error) { 
     alert(error.responseJSON.message); 
    } 
}) 

}）;

祝你好运！

Answer 2

找到要填充选择元素：

var el = $('select[name="doctors"]'); 

然后在阿贾克斯成功的功能，迭代结果并将它们追加为html：

success: function(result) { 
    for (var doctor in result) { 
     var doctor = result[i]; 
     el.append('<option value="' + doctor.value + "'>' + doctor.name + '</option>'; 
    } 
}, 

至少有这种效果。

Answer 3

这是简单的例子，取决于它是什么会变化的确切回复：

$("button").click(function(e) { 
    e.preventDefault(); 
    var id = $(this).val(); 
    $.ajax({ 
     type: "POST", 
     url: "map/"+id, 
     data: { 
      id: $(this).val(), 
      '_token': $('input[name=_token]').val() 
     }, 
     success: function(result) { 
      var toAppend='<option value="null">default</option>>' 
      for(var obj in result){ 
       toAppend+='<option value="'+obj.id+'">'+ obj.title +'</option>>' 
      } 

      $("#populated").append(toAppend) 
     } 
     }, 
     error: function(result) { 
      alert('error'); 
     } 
    }); 

这HTML输入：

<select id="populated"></select>