点击按钮后将动态选择框附加到div

Question

单击按钮后，我试图添加一个手风琴div。很好但是在附加的div中，我有一个选择框，它必须是动态填充的。得到Json结果后，我尝试附加选项值，但是失败了。当我发出警报时，我会得到确切的结果。

这是我的控制人

public function getTypes(){
    $types = AnsTypes::get();
    return response()->json($types);
}

我的Ajax

$.ajax({
    url: site_base_url+ '/surveys/getquestiontypes',
    type: "get",
    contentType: "application/json",dataType: "json",
    success: function(data){ // What to do if we succeed
    if(data){
    $(".group:last").after('<div class="group">' +
    '<select class="custom-select" class="answer_datatype_id">' +
      $.each(data, function(key, value){
      '<option value="'+value.answer_datatype_id+'">' + value.type_name + '</option>'
      }) +
     '</select>'+
      '</div>');
});

我的有效载荷是：

  

JSON
  0 {...}   answer_datatype_id 1   type_name文字   1 {...}   answer_datatype_id 2   type_name单选按钮   2 {…}   answer_datatype_id 3   type_name复选框   3 {...}   answer_datatype_id 4   type_name ListSingleSelection   4 {...}   answer_datatype_id 5   type_name ListMultiSelection

     

响应负载   [{“ answer_datatype_id”：1，“ type_name”：“文本”}，{“ answer_datatype_id”：2，“ type_name”：“ RadioButton”}，{“ answer_datatype_id”：3，“ type_name”：“复选框”}，{ “ answer_datatype_id”：4，“ type_name”：“ ListSingleSelection”}，{“ answer_datatype_id”：5，“ type_name”：“ ListMultiSelection”}]

我的结果

Answer 1

这看起来像您的$.each没有将<option>返回到您的DOM。您可以尝试将<option>添加到名为options的变量中：

let options = "";
$.each(data, function(key, value){
      options +='<option value="'+value.answer_datatype_id+'">' + value.type_name + '</option>'
})

然后将您的options添加到DOM中，如下所示：

$(".group:last").after('<div class="group">' +
'<select class="custom-select" class="answer_datatype_id">' +
  options
   +
 '</select>'+
  '</div>');

这应该有效。 出于记录，我已经尝试过此代码，并且效果很好，请告诉我是否需要其他东西。