Question

我仍在努力解决这个问题。目前这是它看起来的方式，它适用于JSFiddle，但在我的上面只有克隆一次，克隆中有数据，当更改时，更改第1项

我正在尝试简化我的大表单以加快进程。我有一个重复多次的部分，我想减少使用按钮编码一次，如果需要可以添加更多。该部分无法克隆，因为每个部分都是独立且具体的。另请注意，它们都需要唯一标识符。我不知道他们是＆＃34; transectA＆＃34;，＆＃34; transectB＆＃34;等等。下面是一个小片段，可以让您了解我正在使用的内容。每个选择实际上有12个选项，有14个横断面。

<div class="transect"> 
               <select name="transectA" id="transectA">
          <option value="">Transect A </option>
<option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
 <option value = "RIGHT/HOOP">RIGHT/HOOP</option>
 <option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
 <option value = "RIGHT/NONE">RIGHT/NONE</option>
 <option value = "CENTER/SED-CORE">CENTER/CORE</option>
 <option value = "CENTER/HOOP">CENTER/HOOP</option>
 <option value = "CENTER/CHLPHL-1">CENTER/TEMPLATE</option>
 <option value = "CENTER/NONE">CENTER/NONE</option>
 <option value = "LEFT/SED-CORE">LEFT/CORE</option>
 <option value = "LEFT/HOOP">LEFT/HOOP</option>
 <option value = "LEFT/CHLPHL-1">LEFT/TEMPLATE</option>
 <option value = "LEFT/NONE">LEFT/NONE</option>
            </select> </div>

我尝试了几种解决方案（隐藏/显示）＆amp;克隆但没有给我一个满意的结果。我尝试使用append的所有尝试似乎基本上产生了show / hide所做的事情。

    <script>
     $(document).ready(function() {
  var $transect = $('.transect');

$transect.on('change', 'select', function() {
    var $this = $(this),
        $parent = $this.parent(),
        $transects = $('.transect');

    if($transects.length < 14 && !$parent.next('.transect').length) {
        var ltr = String.fromCharCode(65 + $transects.length),
            label = 'transect' + ltr;

        $transect
            .clone(true)
            .find('select')
               .attr('name', 'transect' + ltr)
                .attr('id', 'transect' + ltr)
                .find('option:eq(0)')
                    .text('Transect ' + ltr.toUpperCase())
                .end()
            .end()
            .insertAfter($parent);
    }
});
     })

</script>

与往常一样，我们将非常感谢您的帮助

任何人都可以告诉我为什么所有这些解决方案都可以在JSFiddle中运行，但不能在我的表单上运行。即使是上面的脚本也适用于小提琴，但只有克隆一次在表单上

Answer 1

您应该能够将克隆和一些DOM操作结合起来以获得所需的效果：http://jsfiddle.net/fjJfk/2/

但是你可能需要让这个例子与你自己的标记/情况相匹配。

var $transect = $('._25');

$transect.on('change', 'select', function() {
    var $this = $(this),
        $parent = $this.parent(),
        $transects = $('._25');

    if($transects.length < 14 && !$parent.next('._25').length) {
        var ltr = String.fromCharCode(65 + $transects.length);

        $transect
            .clone(true)
            .find('select')
                .attr('name', 'transect' + ltr)
                .attr('id', 'transect' + ltr)
                .find('option:eq(0)')
                    .text('Transect ' + ltr)
                .end()
            .end()
            .insertAfter($parent);
    }
});

Answer 2

你可以这样做：

var counter = 0
$('.add-new-button').click(function(){
    $('#transectA').append('<option id="input ' + counter +'" value = "RIGHT/SED-CORE">RIGHT/CORE</option>');
    counter++;
});

这将为#transectA添加一个新选项。您也可以使用此方法在其他位置添加表单字段。您可以使用计数器确保它具有唯一的ID或名称或其他。祝你好运

Answer 3

您可以使用以下内容;

<强> HTML：

<div id="tempSelect" style="display:none">
    <select name="transect" data-mini="true" id="transect">
        <option value="">Transect_ </option>
        <option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
        <option value = "RIGHT/HOOP">RIGHT/HOOP</option>
        <option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
        <option value = "RIGHT/NONE">RIGHT/NONE</option>
    </select>
</div

<fieldset>
    <div class="_100">

     </div>
</fieldset>

<input type="button" name="newSelect" id="newSelect" value="New"/>

<强> JS：

$("#newSelect").on("click", function() {
    var lastSelect = $("._100 select").last().attr("name");
    if (lastSelect != undefined) {
        var temp = lastSelect.split("_");
        var id = parseInt(temp[1]) + 1;
    } else {
        var id = 0;
    }
    $("#tempSelect select").attr("name", "transect_" + id);
    $("#tempSelect select").attr("id", "transect_" + id);
    $("#tempSelect select option:first").text("Transect_" + id);
    $("._100").append($("#tempSelect").html());

});

以下是工作演示： jsfiddle

在Jquery中添加div（多次）而不进行克隆

3 个答案: