javascript - 如何在使用javascript和ajax时在for循环(laravel)中使用许多动态下拉列表？

Question

我正在尝试使用多个动态下拉列表，因为我想在 foreach 循环中使用它。在我的过程中，我有每个职位的阶段和状态，我在下面截图了。我循环职位并放置foreach 循环内的动态下拉阶段和状态。 问题是，如果我选择舞台，所有状态都会根据我选择的舞台不断变化。我只想影响我选择舞台的状态，例如在我上面的照片中，如果我选择“下的舞台” chinese tralator(listening,speaking)”职称，应该只影响自己舞台下的身份，不应该影响“出纳”职称下的身份。

这是我迄今为止完成的代码的代码，

<?php

   $jobmatches = \App\Models\Jobposition::where('require_position',$jobseekers->desire_position_1)->orderBy('free_or_paid','desc')->pluck('id');
?>

         @foreach($jobmatches as $value)
           <?php  $job_list = \App\Models\Jobposition::where('id',$value)->first(); ?>
            <div class="form-group"> 
                <input type="checkbox" name="job_position[]" value="{{ $job_list['id']}}"> 
                {{ $job_list['job_title']}}<br>
            </div>

            <div class="form-group">
                <label for="title">Select Stage:</label>
                <select name="stage[]" class="form-control" >
                    <option value="">--- Select Stage ---</option>
                    @foreach ($stages as $key => $value)
                     <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label for="title">Select Status:</label>
                <select name="status[]" class="form-control">
                </select>
            </div>
            @endforeach

这是ajax代码，

       $(document).ready(function() {
        $('select[name="stage[]"]').on('change', function() {
            var stateID = $(this).val();
            if(stateID) {
                $.ajax({
                    url: '/myform/ajax/'+stateID,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {

                        $('select[name="status[]"]').empty();
                        $.each(data, function(key, value) {
                            $('select[name="status[]"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });

                    }
                });
            }else{
                $('select[name="status[]"]').empty();
            }
        });
    });

如有任何帮助，我们将不胜感激。

Answer 1

将包装 div 添加到一组相关元素中:

<div class="job-list">
    <div class="form-group"> 
        <input type="checkbox" name="job_position[]" value="{{ $job_list['id']}}"> 
        {{ $job_list['job_title']}}<br>
    </div>

    <div class="form-group">
        <label for="title">Select Stage:</label>
        <select name="stage[]" class="form-control" >
            <option value="">--- Select Stage ---</option>
            @foreach ($stages as $key => $value)
             <option value="{{ $key }}">{{ $value }}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label for="title">Select Status:</label>
        <select name="status[]" class="form-control">
        </select>
    </div>
</div>

然后在您的 JS 中，您可以调整您的处理程序以仅处理同一组中的元素:

$(document).ready(function() {
    $('select[name="stage[]"]').on('change', function() {
        var stateID = $(this).val();
        /* define the target select, use closest to go back up to the job-list parent, 
         * then pull the select element that is a child of it
         */
        var $select = $(this).closest('.job-list').find('select[name="status[]"]');

        if(stateID) {
            $.ajax({
                url: '/myform/ajax/'+stateID,
                type: "GET",
                dataType: "json",
                success:function(data) {
                    $select.empty();
                    $.each(data, function(key, value) {
                        $select.append('<option value="'+ key +'">'+ value +'</option>');
                    });
                }
            });
        }else{
            $select.empty();
        }
    });
});