用JavaScript附加收集的数据

Question

我有2个不同的数据，它们根据彼此的id加载 我想要做的是将结果附加到第bootstrap 3 based行，如下所示：

  

到目前为止，我可以成功获取3种数据，我遇到的所有问题   有并且需要帮助的是如何如上图所述附加数据？

代码

javascript

<script>
  $(document).ready(function() {
    $('select[name="selectset"]').on('change', function() {
      var id = $(this).val();
      if(id) {
      $.ajax({
        url: '{{ url('admin/selectset') }}/'+encodeURI(id),
        type: "GET",
        dataType: "json",
        success:function(result) {
          $.each(result, function(key, value1) {

            // second data
            $.ajax({
              url: '{{ url('admin/findsubspecification') }}/'+value1['id'],
              type: "GET",
              dataType: "json",
              success:function(data) {

                $.each(data, function(key, value) {
                    $('div#dataaa').append('<div class="row"><div class="col-md-4" id="dataparent">'+value1.title+'</div><div class="col-md-8" id="datainfo">'+value.title+'</div></div>');
                });
              }
            });
            // second data

          });
        }
      });
      }else{
        $('div#dataaa').append('select set');
      }
    });
  });
</script>

html

<div id="dataaa"></div>

这是我现在获取数据的方式：

更新

到目前为止，我已经做到了。仍然有一个问题，那就是我无法获取所有数据，只能获得我的第一个结果。

更改代码

<script>
  $(document).ready(function() {
    $('select[name="selectset"]').on('change', function() {
      var id = $(this).val();
      if(id) {
      $.ajax({
        url: '{{ url('admin/selectset') }}/'+encodeURI(id),
        type: "GET",
        dataType: "json",
        success:function(result) {
          $.each(result, function(key1, value1) {

            // second data
            $.ajax({
              url: '{{ url('admin/findsubspecification') }}/'+value1['id'],
              type: "GET",
              dataType: "json",
              success:function(data) {

                    // Collect data as option
                    var helpers = '';
                    $.each(data, function(key, value) {
                      helpers = '<option value="'+value.id+'">'+value.title+'</option>';
                    });

                    var my_row = $('<div class="row">');
                    var my_html = '<div class="col-md-4">'+value1.title+'</div>';
                    my_html += '<div class="col-md-8"><select class="form-control" id="subs" name="subs[]">'+helpers+'</select></div>';
                    my_row.html(my_html);
                    $('div#dataaa').append(my_row);
              }
            });
            // second data

          });
        }
      });
      }else{
        $('div#dataaa').append('select set');
      }
    });
  });
</script>

更新2

根据要求，这是我的第一个选择选项代码

{{ Form::label('selectset', 'Select Set') }}
<select class="form-control" id="selectset" name="selectset">
  <option value="">Select</option>
   @foreach($selectsets as $selectset)
     <option value="{{ $selectset->id }}">{{ $selectset->title }}</option>
   @endforeach
</select>

Answer 1

更改

$.each(data, function(key, value) {
    helpers = '<option value="'+value.id+'">'+value.title+'</option>';
});

到

$.each(data, function(key, value) {
    helpers += '<option value="'+value.id+'">'+value.title+'</option>';
});

由于每次迭代，它都会覆盖之前的结果