Ajax with the POST method sends the same data-id for all selected select , which are 5, I take the data-id from the database in the foreach .

PHP:

  <div class="row services" id = "which" style='display:none;'> <label >Какой вид услуг вас интересует</label> <div class="working" id = "working"> <?php $services_categories = get_header_services_categories() ; ?> <?php foreach($services_categories as $services_category) { ?> <div class="tr"> <select class="service_category" name="service_category"> <?php $id_cat; $i = 0; foreach ($services_categories as $services_category) { if($i == 0) $id_cat = $services_category['id'];?> <option value = "<?=$services_category['name']?>" data-id = "<?=$services_category['id']?>" ><?=$services_category['name'];?> </option> <?php $i++; } ?> </select> <select data-id="services" class="services" name="services"> <?php $services = get_services_list($id_cat); ?> <?php foreach ($services as $service) { ?> <option value = "<?=$service['name']?>"><?=$service['name']?></option> <?php } ?> </select> <a href="#add-link" class="del-btn" id = "del-btn">X</a> </div> <?php } ?> <a href="#" class="add-link" id="add-link">Указать еще услугу</a> </div>

Js:

 $('.service_category').change(function(){ var parent = $(this).parent(); var id_category = $(".service_category option:selected").data('id'); var select = parent.find(".services"); select.empty("option"); $.ajax({ url: "/services/get_services_list", type: "POST", data: ({ id : id_category, }), success: function(data) { var json = $.parseJSON(data); $.each(json, function(i, elem) { select.append("<option value="+elem.name+">"+elem.name+"</option>"); }); jcf.replaceAll(); }, error: function(data) { alert("error"); } }); });

    0