动态ajax / php选择标签

Question

Good evening, I got a small issue with my dynamic select thing like already said in the title. My goal is to reach the following result: If someone selects an instrument from the first select tag, the other tag called "Besetzung" should filter a list of users who play the selected instrument, for the second select tag like shown in the screenshot (Instrument = instrument; E-Bass = electric bass; Besetzung = occupation; Offen = open)

This works fine so far. But my problem is, that i got like 3 to 10 of these blue boxes (screenshot). You can add these boxes manually over a button. And every single box should contain these "individual" select tags... So i need something like a unique ID for each select tag, each time a box is added. So this is my function for the dynamic selection so far:

function fetch_select(val)
{
    $.ajax({
     url: 'get_data.php',
     type: 'POST',
     data: {
        get_option:val.value
     },
     success: function (response) {
       document.getElementById("studentSelect").innerHTML=response; 
     }
  });
}

If the function succeeds the element with the ID "studentSelect" is changed. But what I need is something like an array or so, which is used in my html, php and ajax to change every single element... I got no idea how to give every single select tag a unique ID because the number of tags will change while someone is using the website.

I hope you understood what I mean, was a bit difficult to explain for me. Thanks for any help in advance.

Answer 1

What you would normally do is use a common class for all elements involved.

Then within the change events you can get the specific instance of the select class that was changed and use that to traverse to the corresponding other select to poplulate

Repeating structure

<div class="row">
   <select class="select-1"></select>
   <select class="select-2"></select>
</div>

JS

$(document).on('change', '.select-1', function(){
   // traverse to closest row, then look within that row for matching select
   var $otherSelect = $(this).closest('.row').find('.select-2');
    $otherSelect.load('get_data.php', {get_option: this.value})
            .fail(function(){ alert('Oops something went wrong')});
});