单击按钮后将动态 select 框附加到 div

Question

我正在尝试在单击按钮后附加手风琴 div。那很好用。但是在附加的 div 里面我有一个 select 框，它必须动态填充。在获得 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 Text 1 {…} answer_datatype_id 2 type_name RadioButton 2 {…} answer_datatype_id 3 type_name CheckBox 3 {…} answer_datatype_id 4 type_name ListSingleSelection 4 {…} answer_datatype_id 5 type_name ListMultiSelection

Response payload [{"answer_datatype_id":1,"type_name":"Text"},{"answer_datatype_id":2,"type_name":"RadioButton"},{"answer_datatype_id":3,"type_name":"CheckBox"},{"answer_datatype_id":4,"type_name":"ListSingleSelection"},{"answer_datatype_id":5,"type_name":"ListMultiSelection"}]

我的结果

Answer 1

这看起来像你的 $.each 而不是 return <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>');

这应该有效。作为记录，我已经尝试过此代码并且运行良好，如果您需要其他代码，请告诉我。

单击按钮后将动态 select 框附加到 div

Append a dynamic select box to a div after button click

javascript

ajax

jquery

laravel-5.8