How to use many dynamic dropdown in forloop(laravel) in using javascript and ajax?

Question

I am trying to do with multiple dynamic dropdown because I want to use it inside foreach loop.In my process, I have stage and status for each job title which I screentshot atttched at the below.I loop the job title and placed the dynamic dropdown stage and status inside the foreach loop. The problem is that if I select stage, all the status is keep changing depending on the stage which i selected.I only want to effect the status which i selected the stage, for example like in my above photo, if i choose stage under "chinese traslator(listening,speaking)" job title, it should be effect only the status under his own stage, should not be effected the status under the "Cashier" job title.

Here is my code for the code which I'd done so far,

<?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

and here is ajax code,

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

Any help would be highly appreciated.

Answer 1

I haven't tested this, but I think it's because you're adding the same listener to every dropdown.

Instead try adding a different listener to each like so:

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

Answer 2

You can keep track of their index and access them with the correct index, like this:

 $('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

Add a wrapping div to the group of interelated elements:

<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>

Then in your JS you can adjust your handler to only work with elements in that same group:

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