Dynamic ajax/php select tag

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')});
});

Answer 2

So you have two select lists, the second one depends of what is selected in the first one. That is a very usual task in questionnaires.

The first thing you did, is to change the second select list via ajax,trigger by a change in the first select list right? (that is fine)

So you basically need is the php(server side code) that returns the html of the 2d select list. Isn't it?

Whatever, what we need here is the list of options for each option of the first list. That info should go server side in tables or arrays if you want.

if you provide the options list for each option of the first list then I or somebody else can help you with the php for it.