Question

我有一个带有2个文本框的控件和一行中的选择框。用户可以添加或删除任何这些行集。我需要在jQuery中执行此操作。有没有人在jQuery中有这种功能/插件的任何良好链接

Answer 1

我在jsbin上发布了一个快速且相当脏的方法，JS和CSS如下：

的JavaScript / jQuery的：

$(document).ready(
    function() {
        $('span.add').live('click',
            function() {
                var
                lastRow = parseInt($('fieldset:last-child').attr('id').slice('1')),
                newRow = lastRow+1,
                newXhtml = '<label for="inputRow' + newRow + '">Label Text</label> <input type="text" name="inputRow' + newRow + '" id="inputRow' + newRow + '" <label for="selectRow' + newRow + '">Label Text</label> <select name="selectRow'+newRow+' id="selectRow'+newRow+'><optgroup label="something"><option value="thisVal">This Value</option><option value="thatVal">That Value</option></optgroup></select><span class="addDelete"><span class="delete">X</span><span class="add">+</span></span>';
                $('form').append('<fieldset id="_' + newRow + '" />');
                $('form fieldset:last-child').prepend(newXhtml);
            }
        );
        $('span.delete').live('click',
            function() {
                if ($('fieldset').length > 1) {
                    $(this).closest('fieldset').remove();
                }
            }
        );
    }
);

CSS：

fieldset    {
        width: 40em;
        margin: 1em auto;
        font-size: 0.8em;
        }

fieldset input,
fieldset label  {
        display: inline;
        width: auto;
        }

span.addDelete  {
        float: right;
        }

span.addDelete span {
        border: 1px solid #000;
        color: #000;
        font-weight: bold;
        margin: 0 0.2em 0 0;
        }

span.delete     {
        background-color: #f00;
        }

span.add    {
        background-color: #0f0;
        }

关于如何生成动态添加的select框的问题存在一个相对较大的问题，但是我很乐意将其作为一个练习，并且可能还有很多，远更好的生成newXhtml变量的方法，但我选择将其保留为简单。

由于if ($('fieldset').length > 1)评估而导致当前实施阻止用户删除所有字段集，但不会阻止他们删除特定字段集。您可能希望理智地检查这种方法。如果您有任何疑问，请随时在评论中询问，好吧，我会尽我所能=）

在jQuery中重复控制

1 个答案: