Multiple On select change Ajax Laravel

Question

I work on Laravel 5.2 and I generate a table, using a foreach loop on my employees, with list of employees like this :

ID Name Team Category
1  toto t1   select
2  tata t1   select
3  titi t2   select

With "select" an input type select with the list of available categories. When I change the category in the select I want to insert a new line in my table "category_relation" with the employee's id and the category selected.

My question is : When a select change, how can I get the correct ID and category in ajax and send them to my function store in my controller ?

Thanks all

EDIT : I tried this :

$(document).ready(function() {
    $(".selectCategory").change(function(){
        $.ajax({
            method: 'POST', 
            url: '/employee/changecateg', 
            data: {'id' : $('input.employee_id').val(), 'categ' : $('select.selectCategory').val()}, 
            success: function(response){ 
                console.log(response); 
            },
            error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    })
});

And my employees list :

{!! Form::open(['method' => 'post', 'url' => action('AffectAbcController@store')]) !!}
    <div class="table-responsive">
        <table class="table table-striped m-b-none datatable">
            <thead>
            <tr>
                <th class="no-sort">Photo</th>
                <th>Entrée</th>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Site</th>
                <th>Pôle</th>
                <th>Equipe</th>    
                <th class="no-sort">Tél interne</th>
                <th>Affecter catégorie</th> 
            </tr>
            </thead>
            <tbody>

            @foreach ($personnels as $personnel)
            <?php $i++ ?>
                <tr>
                    <td>{{ $personnel->PERSO_ETAT}}</td>
                    <td>{{ $personnel->PERSO_DATE_ENTREE }}</td>
                    <td>{{ $personnel->PERSO_NOM_USAGE}}</td>
                    <td>{{ $personnel->PERSO_PRENOM }} </td>
                    <td>{{ $personnel->site["SITE_LIBELLE"]}}</td>
                    <td>{{ $personnel->pole["POLE_LIBELLE"]}}</td>
                    <td>{{ $personnel->equipe["EQUIPE_LIBELLE"]}}</td>
                    <td>{{ $personnel->PERSO_TELEPHONE}}</td>
                    <td> 
                        <input type="hidden" class="employee_id" name="HISTO_AFFECT_ID_PERSONNEL" value="{{$personnel->PERSO_ID_PERSONNEL}}"/>
                        <select class="form-input selectCategory" name="HISTO_AFFECT_ID_CATEG">
                            <option value="0"></option>
                            @foreach ($categories as $category)
                                @if(isset($personnel->lastAbc[0]))
                                    @if($personnel->lastAbc[0]["HISTO_AFFECT_ID_CATEG"]==$category->CATEG_ID_ABC)
                                        <option value='{{$category->CATEG_ID_ABC}}' selected="selected">{{$category->CATEG_CODE_ABC}} - {{$category->CATEG_LIBELLE_ABC }}</option>
                                    @else
                                        <option value='{{$category->CATEG_ID_ABC}}'>{{$category->CATEG_CODE_ABC}} - {{$category->CATEG_LIBELLE_ABC }}</option>
                                    @endif
                                @else
                                    <option value='{{$category->CATEG_ID_ABC}}'>{{$category->CATEG_CODE_ABC}} - {{$category->CATEG_LIBELLE_ABC }}</option>
                                @endif
                            @endforeach
                        </select>

                    </td>
                </tr>

            @endforeach
            </tbody>
        </table>
    </div>

    </form>

The problem is all select have the same class, so when i get it I often have the first select value even if I change an other.

Answer 1

Change

data: {'id' : $('input.employee_id').val(), 'categ' : $('select.selectCategory').val()},

To

data: {'id' : $(this).siblings('input.employee_id').val(), 'categ' : $(this).val()},

$(this) is the current element in context (since it's a change on the select element, then this is the select element that's changed). Therefore we can use that to get the current element's selected value, and also the value of the nearest employee id box (using .siblings()).

Answer 2

As far as I can understand you are unable to get the correct Hidden input value and Correct Select Box value.

You just have to change your JS a bit.

Make a variable inside your Select Change Event.

var $td = $(this).parent();

Then inside Ajax :

data: {
    'id' : $td.find('input.employee_id').val(), 
    'categ' : $td.find('select.selectCategory').val()
},

Hope this helps.