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

using jQuery chosen in dynamic form fields

本文关键字：选择 jQuery 字段 表单 动态      更新时间：2023-09-26

这是一个表格行。 它包含 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>

实际形式是拉拉维尔。这是拉拉维尔表单代码。

<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();
});

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++;
});
相关文章：