Jquery 多字段引导动态表单

我试图在bootstrap中创建一个具有多个字段的动态表单，似乎需要在表单元素中附加一个非常长的字符串。我非常确信应该有更有效的方法来做到这一点。如果你能让我知道其他方法，我将不胜感激

表格的图像

html:

性质


图像大小：
128×128
256×256
512×512
1024×1024
原语
原始的
球
三角形
颜色
红色
蓝色
绿色
黄色的
点光源位置：

JavaScript:

function getHTMLString() {
    var complex_html = [
        '<div class="row" id="primitive-form">',
            '<div class="form-group form-horizontal">',
              '<div class="container">',
                '<div class="form-inline" id="primitive_fields">',
                  '<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">',
                    '<option value=" " disabled selected>primitive</option>',
                    '<option value="sphere">sphere</option>',
                    '<option value="triangle">triangle</option>',
                  '</select>',
                  '<input type="number" class="input-small form-control" id="diameter"  name="Diameter[]" step="any" placeholder="diameter(D)">',
                  '<input type="text" class="input-small form-control"  id="sphere-position" name="SpherePosition[]"  placeholder="(x, y, z)">',
                  '<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">',
                    '<option value=" " disabled selected>color</option>',
                    '<option value="red">red</option>',
                    '<option value="blue">blue</option>',
                    '<option value="green">green</option>',
                    '<option value="yellow">yellow</option>',    
                  '</select>', 
                  '<button type="button" class="btn btn-success btn-add" id="remove_more"> <span class="glyphicon glyphicon-minus" aria-hidden="false"></span></button>',
                '</div>',
              '</div>',
            '</div>',
          '</div>',
    ].join('');
    return complex_html;
}
$(document).ready(function() {
    var formCount = 0;
    $('#add_more').on('click', function(e) {
        if (formCount < 4) { 

            var html = getHTMLString();
            var element = $(html);

            $('#dynamic_form').append(html);
            formCount++;
        } else {
            return;
        }
    });


    $('#dynamic_form').on("click","#remove_more", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').parent('div').parent('div').parent('div')[0].remove(); formCount--;

    })
});

函数getHTMLString（）{ var complex_html=[ '', '', '', '', '', “原始的”， “球体”， “三角形”， '', '', '', '', “颜色”， “红色”， “蓝色”， “绿色”， “黄色”， '', ' ', '', '', '', '', ].加入（“”）； 返回复杂的html； } $（文档）.ready（函数（）{ var-formCount=0； $（'add#u more'）。在（'click'，函数（e）上{ 如果（formCount<4）{ var html=getHTMLString（）； var元素=$（html）； $（“#动态表单”）.append（html）； formCount++； }否则{ 返回； } }); $（“#动态表单”）。在（“单击”，“删除更多”，函数（e）{//用户单击删除文本 e、 preventDefault（）；$（this）.parent（'div'）。parent（'div'）。parent（'div'）。parent（'div'）[0]。remove（）；formCount--； }) });

---

将您的

表单内联

提供另一个可用于克隆的类

var formRow = $('.div_to_clone').first();
var clone = formRow.clone();

$('#dynaic_form').append(clone);

var formRow = $('.div_to_clone').first();
var clone = formRow.clone();

$('#dynaic_form').append(clone);