Question

我正在尝试使用多个动态下拉列表，因为我想在foreach循环中使用它。在我的过程中，我有每个职位的阶段和状态，我在下面的screentshot.I循环工作标题并放置foreach循环内的动态下拉阶段和状态。问题是，如果我选择舞台，所有状态都会根据我选择的舞台不断变化。我只想影响我选择舞台的状态，例如我上面的照片，如果我选择“中国翻译（听，说）“职称，应该只影响他自己阶段的地位，不应该影响”出纳“职称下的地位。

这是我到目前为止所做代码的代码，

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

Answer 2

您可以跟踪索引并使用正确的索引访问它们，如下所示：

 $('select[name="stage[]"]').on('change', function() {
        var stateID = $(this).val();
        var index = $(this).index();
        var statusElem = $('select[name="status[]"]').get(index);
        ...
        statusElem.empty();
        $.each(data, function(key, value) {
            statusElem.append('<option value="'+ key +'">'+ value +'</option>');
         });
        ...
        statusElem.empty();
});

Answer 3

我没有对此进行测试，但我认为这是因为你在每个下拉列表中都添加了相同的监听器。

而是尝试为每个人添加一个不同的监听器：

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

                    $(this).empty();
                    $.each(data, function(key, value) {
                        $(this).append('<option value="'+ key +'">'+ value +'</option>');
                    });

                }
            });
        } else {
            $(this).empty();
        }
    });
  });
});

如何在使用javascript和ajax的forloop（laravel）中使用许多动态下拉列表？

3 个答案: