Question

这是一个表行。它包含5个输入字段。第一个是选择框。我正在使用选择的jquery插件来搜索此选项。这是一个动态表单，所以我复制这些行。我的问题它只适用于第一行。当我动态添加新行选择下拉不工作。请帮忙！

<tr>
    <td>
        <select class="form-control itemId" id="item_id" required="required" name="item_id[]">
            <option value="">Select an item</option>
            <option value="1">Item1</option>
            <option value="2">Item2</option>
            <option value="3">Item3</option>
            <option value="4">Item4</option>
        </select>
    </td>
    <td>
        <input class="form-control item_description" id="item_description" placeholder="Not Required | Optional" name="item_description[]" type="text">
    </td>
    <td>
        <input class="form-control" placeholder="Add Number" id="units" required="required" name="units[]" type="text">
    </td>
    <td>
        <input class="form-control" placeholder="Add Rate" id="rate" required="required" name="rate[]" type="text">
    </td>
    <td>
        <input class="form-control amount" id="amount" placeholder="Add Hrs and Rate" name="amount[]" type="text">
    </td>
</tr>

实际形式是laravel。这是laravel表单代码。

<tr>
    <td>
        {!! Form::select('item_id[]', ['' => 'Select an item'] + $items, null, ['class' => 'form-control itemId', 'id' => 'item_id', 'required']) !!}
    </td>
    <td>
        {!! Form::text('item_description[]', null, ['class' => 'form-control item_description', 'id' => 'item_description', 'placeholder' => 'Not Required | Optional']) !!}
    </td>
    <td>
        {!! Form::text('units[]', null, ['class' => 'form-control', 'placeholder' => 'Add Number', 'id' => 'units', 'required']) !!}
    </td>
    <td>
        {!! Form::text('rate[]', null, ['class' => 'form-control', 'placeholder' => 'Add Rate', 'id' => 'rate', 'required']) !!}
    </td>
    <td>
        {!! Form::text('amount[]', null, ['class' => 'form-control amount', 'id' => 'amount', 'placeholder' => 'Add Hrs and Rate']) !!}
    </td>
</tr>

用于动态填充行的jQuery代码。

var i = 1;
$("#addRow").click(function() {
    $("table tr:last").clone().find(":input").each(function() {
        $("#item_id" + i).val('').trigger("liszt:updated");
        $(this).val('').attr('id', function(_, id) { return id + i });
    }).end().appendTo("table");
    i++;
});

选择代码

$(document).ready(function() {
    $('#item_id').chosen();
});

Answer 1

var i = 1;
$("#addRow").click(function() {
    var $row = $("table tr:last").clone().find(":input").each(function() {
        $("#item_id" + i).val('').trigger("liszt:updated");
        $(this).val('').attr('id', function(_, id) { return id + i });
    }).end();
    $row.appendTo("table");
    $row.find("select").chosen();
    i++;
});

使用在动态表单字段中选择的jQuery

1 个答案: