javascript - 使用 javascript 和 ajax 选项创建 select html

Question

我有这个简单的表格

<form class="form-horizontal" method="post" action="pantalla1.php">
              <div class="box-body">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table id="vender" class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Nro. Slide</th>
                        <th>Fondo</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="slidenro[]" id="slidenro_1" value="1" class="form-control" readonly></td>
                        <td><select name="cbofon[]" id="cbofon_1" class="form-control select2">
                    </select></td>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>
        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">

</div>
            <button class="btn btn-danger delete" type="button">- Borrar</button>
            <button class="btn btn-success addmore" type="button">+ Agregar Slide</button>


              </div><!-- /.box-body -->
              <div class="box-footer">
                <button type="submit" id="btnact" name="btnact" class="btn btn-info pull-right">Actualizar</button>
              </div><!-- /.box-footer -->
            </form>

这是填充第一个选择的函数，它工作正常

    $(function populate(){

$.ajax({                                      
  url: 'getfotos.php',                      
  data: "",                      
  dataType: 'json',                     
  success: function(data){          

   var sel = document.getElementById('cbofon_1');

    for(var i = 0; i < data.length; i++) {
        var opt = document.createElement('option');
        opt.innerHTML = data[i][1];
        opt.value = data[i][1];
        sel.appendChild(opt);

            }

  },
complete: function() {

} 

});
}); 

这是向表格添加另一行的函数

$(".addmore").on('click',function(){
var i=$('table tr').length;
html = '<tr>';
html += '<td><input type="text" name="slidenro[]" id="slidenro_'+i+'" value="'+i+'" class="form-control" readonly></td>';
html += '<td><select name="cbofon[]" id="cbofon_'+i+'" class="form-control select2"></select></td>';
html += '</tr>';
$('table').append(html);
i++;
});

但是我有一个问题，如何使用第一个选择中的 ajax 内容填充使用 .addmore 按钮创建的每个新选择

我已经尝试了我所知道的一切，但我对 javascript 和 ajax 非常菜鸟

Answer 1

只需将前一个选择的innerhtml添加到新选择的

修改了您的 addmore 点击次数

$(".addmore").on('click',function(){
var i=$('table tr').length;
html = '<tr>';
html += '<td><input type="text" name="slidenro[]" id="slidenro_'+i+'" value="'+i+'" class="form-control" readonly></td>';
html += '<td><select name="cbofon[]" id="cbofon_'+i+'" class="form-control select2">' + $("#cbofon_1").html() + '</select></td>';
html += '</tr>';
$('table').append(html);
i++;
});

也许这有帮助。