使用javascript和ajax选项创建选择html

我有一张简单的表格

<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>

Nro。滑动
丰多
-博拉尔
+阿格雷加滑梯
现实主义者

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

    $(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() {

} 

});
}); 

$（函数填充（）{
$.ajax（{
url:'getfotos.php'，
数据：“，
数据类型：“json”，
成功：函数（数据）{
var sel=document.getElementById（'cbofon_1'）；
对于（变量i=0；i

此函数用于向表中添加另一行

$(".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++;
});

$（.addmore”）。在（'click'，function（）上{
变量i=$（'table tr'）。长度；
html=''；
html+=''；
html+=''；
html+=''；
$（'table'）.append（html）；
i++；
});

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

我已经尝试了我所知道的一切，但我对javascript和ajax非常熟悉，我修改

populate（）

函数以接受元素ID作为参数：

function populate(id) {
   id = id || 'cbofon_1'; // default value, if no id is passed in
   $.ajax({                                      
      url: 'getfotos.php',                      
      data: "",                      
      dataType: 'json',                     
      success: function(data){          
         var sel = document.getElementById(id);
   // etc.

然后使用click hander中的参数调用该函数：

$(".addmore").on('click',function(){
   var id = 'cbofon_'+i;
   // ... 
   html += '<td><select name="cbofon[]" id="'+id+'"'
   // ...
   populate(id);

$（.addmore”）。在（'click'，function（）上{
变量id='cbofon_uu'+i；
// ... 
html+='修改
populate（）
函数以接受元素ID作为参数：

function populate(id) {
   id = id || 'cbofon_1'; // default value, if no id is passed in
   $.ajax({                                      
      url: 'getfotos.php',                      
      data: "",                      
      dataType: 'json',                     
      success: function(data){          
         var sel = document.getElementById(id);
   // etc.

然后使用click hander中的参数调用该函数：

$(".addmore").on('click',function(){
   var id = 'cbofon_'+i;
   // ... 
   html += '<td><select name="cbofon[]" id="'+id+'"'
   // ...
   populate(id);

$（.addmore”）。在（'click'，function（）上{
变量id='cbofon_uu'+i；
// ... 
html+='要提高性能，可以先获取一次数据，然后将数据存储在变量中：

var fotos = [];

$.ajax({
    url: 'getfotos.php',
    data: "",
    dataType: 'json',
    success: function(data) {
        fotos = data;
        populateFotosSelect(1);
    }
});

然后创建一个函数来填充您的选择：

function populateFotosSelect(index) {
    var sel = document.getElementById('cbofon_' + index);
    var opt;

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

函数populateFotosSelect（索引）{
var sel=document.getElementById（'cbofon_uu'+索引）；
var-opt；
对于（变量i=0；i

并为单击事件创建侦听器：

$(".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);
    populateFotosSelect(i);
    i++;
});

$（.addmore”）。在（'click'，function（）上{
变量i=$（'table tr'）。长度；
html=''；
html+=''；
html+=''；
html+=''；
$（'table'）.append（html）；
大众选择（i）；
i++；
});

所有代码一起：

(function() {
    'use strict';
    var fotos = [];

    $.ajax({
        url: 'getfotos.php',
        data: "",
        dataType: 'json',
        success: function(data) {
            fotos = data;
            populateFotosSelect(1);
        }
    });

    $(".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);
        populateFotosSelect(i);
        i++;
    });

    function populateFotosSelect(index) {
        var sel = document.getElementById('cbofon_' + index);
        var opt;

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

}());

（函数（）{
"严格使用",；
var fotos=[]；
$.ajax({
url:'getfotos.php'，
数据：“，
数据类型：“json”，
成功：功能（数据）{
fotos=数据；
普罗旺特福德选区（1）；
}
});
$（“.addmore”）。在（'click'，function（）上{
变量i=$（'table tr'）。长度；
html=''；
html+=''；
html+=''；
html+=''；
$（'table'）.append（html）；
大众选择（i）；
i++；
});
函数populateFotosSelect（索引）{
var sel=document.getElementById（'cbofon_uu'+索引）；
var-opt；
对于（变量i=0；i
要提高性能，您可以先获取一次数据，然后将数据存储在变量中：

var fotos = [];

$.ajax({
    url: 'getfotos.php',
    data: "",
    dataType: 'json',
    success: function(data) {
        fotos = data;
        populateFotosSelect(1);
    }
});

然后创建一个函数来填充您的选择：

function populateFotosSelect(index) {
    var sel = document.getElementById('cbofon_' + index);
    var opt;

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

函数populateFotosSelect（索引）{
var sel=document.getElementById（'cbofon_uu'+索引）；
var-opt；
对于（变量i=0；i

并为单击事件创建侦听器：

$(".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);
    populateFotosSelect(i);
    i++;
});

$（.addmore”）。在（'click'，function（）上{
变量i=$（'table tr'）。长度；
html=''；
html+=''；
html+=''；
html+=''；
$（'table'）.append（html）；
大众选择（i）；
i++；
});

所有代码一起：

(function() {
    'use strict';
    var fotos = [];

    $.ajax({
        url: 'getfotos.php',
        data: "",
        dataType: 'json',
        success: function(data) {
            fotos = data;
            populateFotosSelect(1);
        }
    });

    $(".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);
        populateFotosSelect(i);
        i++;
    });

    function populateFotosSelect(index) {
        var sel = document.getElementById('cbofon_' + index);
        var opt;

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

}());

（函数（）{
"严格使用",；
var fotos=[]；
$.ajax({
url:'getfotos.php'，
数据：“，
数据类型：“json”，
成功：功能（数据）{
fotos=数据；
普罗旺特福德选区（1）；
}
});
$（“.addmore”）。在（'click'，function（）上{
变量i=$（'table tr'）。长度；
html=''；
html+=''；
html+=''；
html+=''；
$（'table'）.append（html）；
大众选择（i）；
i++；
});
函数populateFotosSelect（索引）{
var sel=document.getElementById（'cbofon_uu'+索引）；
var-opt；
对于（变量i=0；i
只需将上一个select的innerhtml添加到新select的

修改了你的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++;
});

$（.addmore”）。在（'click'，function（）上{
变量i=$（'table tr'）。长度；
html=''；
html+=''；
html+=''+$（“#cbofon_1”）.html（）+''；
html+=''；
$（'table'）.append（html）；
i++；
});

也许这会有所帮助。
只需将上一个select的innerhtml添加到新select的

修改了你的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++;
});

$（.addmore”）。在（'click'，function（）上{
变量i=$（'table tr'）。长度；
html=''；
html+=''；
html+=''