jquery表单高级表单克隆

Question

如何使表单可以在单击“添加行”链接时添加行，并在单击“删除”时删除。此外，我的表单中有一个下拉列表，其中包含以下选项1. -Select-默认情况下2. Asset 3. No Asset

现在，当用户选择Asset时，会在当前行的正下方显示一个动态表单。动态框应具有以下字段1.资产类型:一个下拉列表(其值应使用ajax填充) 2.名称:简单输入文本字段3.序列号:文本字段4.描述:文本字段

这个表单应该有添加和删除的选项，甚至对于那些添加的行，动态表单框也应该生成。

 <table id="expense_table" class="">
            <thead>
                <tr>
                <th>Sl. No</th>
                <th>Particulars</th>
                <th>Type</th>
                <th>Qty</th>
                <th>Rate</th>
                <th>Amount</th>
                <th>Action</th>
            </tr>
           </thead>
    <tbody>
            <tr id="row_1">
                <td>1</td>
                <td><input type="text" name="particulars" /></td>
                <td>
                    <select id="expense_type" name="expense_type" class="exp_type span2">
                        <option value="">---Select---</option>
                        <option value="asset">Asset</option><!---when Asset is selected a dynamic box with some fields should appear---->
                        <option value="non_asset">Non Asset</option>
                    </select>
                </td>
                <td><input type="text" name="qty" class="input-small" /></td>
                <td><input type="text" name="rate" class="input-small"  /></td>
                <td><input type="text" name="amount" class="input-small"  /></td>
                <td>X</td>
            </tr>
            <tr id="asset_details_1"><td colspan="7"> <!----- here should be the dynamic box with the fields---->
</td></tr>
    </tbody>
</table>

我曾经使用过表单克隆，当我没有下拉列表的时候，我得到了它的工作，但是在下拉列表和动态框中，我无法做到这一点，所以我怎样才能在php中接收服务器中的数据。请帮帮我。我不希望整个代码都是为我写的，但你在正确方向上的指导才是我想要的。谢谢

Answer 1

好的，jQuery.addRow插件将帮助你做克隆选择框。

看一看here

它允许动态添加和删除行。

$(".addRow").btnAddRow();
$(".delRow").btnDelRow();

上面两个也有回调函数。

你有选择框和它的克隆的expense_type id，并且不能有多个dom的相同id。

现在动态添加的选择框还没有分配事件，所以请使用.on

$('select[name="name="expense_type""]').on('change',function(){
   //write code
});