Question

我已经使用日期字段和选择框形成并添加了行，一旦我点击添加行，它就会添加一个具有相同字段的新行。

问题是，选择框不起作用。

这是我的观看代码：

<div class="panel panel-inverse" data-sortable-id="ui-general-1">
<div class="panel-heading">
    <div class="panel-heading-btn">
        <a id="add-row-btn" class="btn btn-xs btn-default"> Add new row</a>
    </div>
    <h4 class="panel-title">Interview Track | Form</h4> 
</div>
<div class="panel-body">
    <div class="interviewTrack-boxes">
        <div class="row interviewTrack-content">
             <?php $index = 0; ?> 
            {!! Form::hidden('interviewTracks['.$index.'][id]', null)!!}    
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Track Date</label>
                            {!! Form::text('interviewTracks['.$index.'][track_date]', null, ['id' => 'remarks', 'class' => 'form-control'])!!}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Status</label>
                            {!! Form::select('interviewTracks['.$index.'][status]', $interviewTrackList, null, ['id' => 'status', 'class' => 'form-control'])!!}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="control-label">Outcome</label>
                            {!! Form::select('interviewTracks['.$index.'][outcome]', $outcomeList, null, ['id' => 'outcome', 'class' => 'form-control'])!!}
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Remarks</label>
                            {!! Form::text('interviewTracks['.$index.'][remarks]', null, ['id' => 'remarks', 'class' => 'form-control'])!!}
                        </div>
                    </div>
                </div>
            <?php $index++; ?>
        </div>
    </div>
</div>
</div>

这是我到目前为止添加新行的jquery：

var $index = parseInt($('.interviewTrack-content').last().attr('id')) + 1; 
    $('#add-row-btn').on('click', function(e) { 

        var hrEle = $('<hr>'); 
        $('.interviewTrack-boxes').append(hrEle); 
        $('.interviewTrack-content:last .form-group input[type="text"]').each(function(index) { 
            var eleName = $(this)[0].name; 
            var id = parseInt($('.interviewTrack-content').last().attr('id')); 
            eleName.replace('['+id+']', '[1]'); 
            $(this).attr('name', eleName.replace('['+id+']', '['+$index+']')); 
        });  
        var clone = $('.interviewTrack-content').last().clone(); 
        clone.appendTo($('.interviewTrack-boxes')); 
        $('.interviewTrack-content').last().attr('id', $index); 
        $index++; 
    });

任何想法？

Answer 1

将<div class="row interviewTrack-content">更改为<div class="row interviewTrack-content" id="<?php echo $index ?>">

<div class="panel panel-inverse" data-sortable-id="ui-general-1">
    <div class="panel-heading">
        <div class="panel-heading-btn">
            <a id="add-row-btn" class="btn btn-xs btn-default"> Add new row</a>
        </div>
        <h4 class="panel-title">Interview Track | Form</h4> 
    </div>
    <div class="panel-body">
        <div class="interviewTrack-boxes">
           <?php $index = 0; ?> 
            <div class="row interviewTrack-content" id="<?php echo $index ?>"> 
                {!! Form::hidden('interviewTracks['.$index.'][id]', null)!!}    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Track Date</label>
                                {!! Form::text('interviewTracks['.$index.'][track_date]', null, ['id' => 'remarks', 'class' => 'form-control'])!!}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Status</label>
                                {!! Form::select('interviewTracks['.$index.'][status]', $interviewTrackList, null, ['id' => 'status', 'class' => 'form-control'])!!}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">Outcome</label>
                                {!! Form::select('interviewTracks['.$index.'][outcome]', $outcomeList, null, ['id' => 'outcome', 'class' => 'form-control'])!!}
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Remarks</label>
                                {!! Form::text('interviewTracks['.$index.'][remarks]', null, ['id' => 'remarks', 'class' => 'form-control'])!!}
                            </div>
                        </div>
                    </div>
                <?php $index++; ?>
            </div>
        </div>
    </div>
    </div>

jquery的

添加了

$('.interviewTrack-content:last .form-group select[class="form-control"]').each(function(select) {
        var eleName = $(this)[0].name;
        console.log(eleName);
        var id = parseInt($('.interviewTrack-content').last().attr('id'));
        eleName.replace('['+id+']', '[1]');
        console.log(id);
        $(this).attr('name', eleName.replace('['+id+']', '['+$index+']'));
    });

并将$ index更改为jquery code中的index.below是最终的jquery。

var index = parseInt($('.interviewTrack-content').last().attr('id')) + 1;
$('#add-row-btn').on('click', function(e) {

    var hrEle = $('<hr>');
    $('.interviewTrack-boxes').append(hrEle);
    $('.interviewTrack-content:last .form-group input[type="text"]').each(function(index) {
        var eleName = $(this)[0].name;

        var id = parseInt($('.interviewTrack-content').last().attr('id'));
        eleName.replace('['+id+']', '[1]');
        console.log(id);
        $(this).attr('name', eleName.replace('['+id+']', '['+index+']'));
    });
    $('.interviewTrack-content:last .form-group select[class="form-control"]').each(function(select) {
        var eleName = $(this)[0].name;
        console.log(eleName);
        var id = parseInt($('.interviewTrack-content').last().attr('id'));
        eleName.replace('['+id+']', '[1]');
        console.log(id);
        $(this).attr('name', eleName.replace('['+id+']', '['+index+']'));
    });
    $('.interviewTrack-content:last .form-group select[class="form-control"]').each(function(select) {
        var eleName = $(this)[0].name;
        console.log(eleName);
        var id = parseInt($('.interviewTrack-content').last().attr('id'));
        eleName.replace('['+id+']', '[1]');
        console.log(id);
        $(this).attr('name', eleName.replace('['+id+']', '['+index+']'));
    });
    var clone = $('.interviewTrack-content').last().clone();
    clone.appendTo($('.interviewTrack-boxes'));
    $('.interviewTrack-content').last().attr('id', index);
    index++;
});

循环选择框

1 个答案: