Question

我有一个包含select元素的表单，我想通过选择添加和删除其中的一些元素。这是html代码（这里也有jsfiddle http://jsfiddle.net/txhajy2w/）：

<form id="Form" action="#" method="POST">
    <div id="FormContainer">
        <div class="Row" id="container_0">
            <a id="delete_link_0">
                <i class="glyphicon glyphicon-minus"></i>
            </a>
            <select class="type_name" name="type_name_0" id="type_name_0">
                <option value="">Select an Option</option>
                <optgroup label="All Options">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </optgroup>
            </select>
            <a id="new_link_0">
                <i class="glyphicon glyphicon-plus"></i>
            </a>
        </div>
    </div>
    <div>
        <input type="submit" name="submit" value="Submit">
    </div>
</form>

我需要的是：

单击加号将生成一个新行（包括div，select和加/减链接）。但是，我需要元素的新行，新ID和名称（使用数字，例如type_name_1，type_name_2等，仅更改索引号）。
点击减号，将删除该特定行，并重新编号其余元素的所有ID。

Answer 1

好的是再次使用新ID添加select元素并删除最后添加的select元素，您可以执行以下操作：

<强> DEMO

$('#new_link_0').on('click',function(){
    var select=$('.wrap').find('select:last').clone();
    var id=$(select).attr('id').split('_')[2];
    $(select).attr('id','type_name_'+parseInt(id+1));
    $(select).attr('name','type_name_'+parseInt(id+1));
    $(select).insertAfter('.wrap select:last');
});

$('#delete_link_0').on('click',function(){
    $('.wrap').find('select:last').remove();
});

<强>更新

要每次添加新商品并将整套ids重置为正确的数量，您可以按照以下方式执行，但您需要遵循以下html结构：

<强> DEMO

<强> HTML

<form id="Form" action="#" method="POST">
    <div id="FormContainer">            
        <div class="Row" id="container_0">
            <div class="wrap">
               <div class="element"> //wrap each cloning element inside a div
                   <a id="delete_link_0" href="#" class="minus">
                       <i class="glyphicon glyphicon-minus"></i>
                   </a>
                   <select class="type_name" name="type_name_0" id="type_name_0">
                        <option value="">Select an Option</option>
                        <optgroup label="All Options">
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                            <option value="3">Option 3</option>
                        </optgroup>
                    </select>
                    <a id="new_link_0" href="#"  class="plus">
                        <i class="glyphicon glyphicon-plus"></i>
                    </a>
                </div>
            </div>
       </div>
    </div>
    <div>
        <input type="submit" name="submit" value="Submit"/>
    </div>
</form>

<强> JS

$(document).on('click','.plus',function(){
    var element=$('.wrap').find('.element:last').clone();//clone last element always
    var id=parseInt($(element).find('select').attr('id').split('_')[2])+1;
    $(element).find('select').attr('id','type_name_'+id);
    $(element).find('.plus').attr('id','new_link_'+id);
    $(element).find('.minus').attr('id','delete_link_'+id);
    $(element).find('select').attr('name','type_name_'+id);
    $(element).insertAfter('.wrap .element:last'); //insert at the end once modification to the cloned elements has been done
});

$(document).on('click','.minus',function(){
    if($('.wrap .element').length===1) //check for the length if there is only one element then prevent it from deleting
    {
        alert('Cannot delete this! Atleast one item must be there');
        return false;
    }
    $(this).parents('.element').remove();
    $.each($('.element'),function(index,value){//find each .element and reset the `ids` of the controls inside it
        $(this).find('.minus').attr('id','delete_link_'+index);
        $(this).find('.plus').attr('id','new_link_'+index);
        $(this).find('select').attr('id','type_name_'+index).attr('name','type_name_'+index);
    });
});

注意：如果您在流程中执行此类操作，重置ids可能会产生实时问题

使用JavaScript添加/删除元素（添加/删除带有编号ID和名称的字段）

1 个答案: