Question

当页面加载我拉到我的组合框时，我从json获得了一些数据。

function DataProvide(){
    //Load data from json
    selectValues = { 
        "pilih"         : "-Pilih-",
        "id"            : "ID",
        "emp_name"      : "Employee Name",
        "photo_path"    : "Photo Path",
        "emp_id"        : "Employee ID",
        "birth_place"   : "Birth Place",
        "birth_date"    : "Birth Date"
    };

    $.each(selectValues, function(key, value) {   
         $('#data1_1')
             .append($("<option></option>")
             .attr("value",key)
             .text(value)); 
    }); 
}

$(document).ready(function() {
     DataProvide();
});

当页面加载时，我成功地将数据输入到组合框中，但我的问题是当我想使用$ .Append ....在表中执行额外的行时。

$(".addCF").click(function(){
      count += 1;
      $("#customFields").append(
          '<tr>'
            + '<td>'
                    + '<select id="data1_'+count+'" class="tabelBaru" name="data1[]">'
                            + '<option value="pilih" selected >Pilih</option>'
                            + ... clone from element $('#data1_1')
                            + ... clone from element $('#data1_1')
                            + ... clone from element $('#data1_1')
                    + '</select>'
            + '</td>'
            + '<td>'
                + '<input id="data2_'+count+'" type="text" name="data2[]" class="data2" value="" placeholder=""/>'
            + '</td>'
            + '<td>'
                + '<input id="data3_'+count+'" type="email" name="data3[]" class="data3" value="" placeholder=""/>'
            + '</td>'
            + '<td>'
                + '<a href="javascript:void(0);" class="remCF">Remove</a>'
            + '</td>'
        + '</tr>'
      );
  });

如何使用函数$ .clone将$('#data1_1')元素与第一页打开时创建的所有数据一起使用？

Answer 1

尝试

$(".addCF").click(function () {
    count += 1;
    var $row = $('<tr>' + '<td>' + '</td>' + '<td>' + '<input id="data2_' + count + '" type="text" name="data2[]" class="data2" value="" placeholder=""/>' + '</td>' + '<td>' + '<input id="data3_' + count + '" type="email" name="data3[]" class="data3" value="" placeholder=""/>' + '</td>' + '<td>' + '<a href="javascript:void(0);" class="remCF">Remove</a>' + '</td>' + '</tr>').appendTo("#customFields");

    $row.find('td:first').append($('#data1_1').clone())
});

Answer 2

以下应该可以解决问题：

var myHtml = ""

$.each(selectValues, function(key, value) {   
     myHtml += "<option value=\"" + key + "\">" + value + "</option>";
}); 

$("data1_1").append(myHtml);

请注意，将其构建为字符串，虽然看起来不太好但总是更有效。

当我使用$ .append时如何克隆元素

2 个答案: