Ajax 선택 옵션 그룹이 작동하지 않습니다.

Question

카테고리 및 서비스는 두 개의 테이블 (카테고리, 서비스)에 저장됩니다. 직원 선택에 따라 단일 선택 상자에 모든 범주 및 서비스를로드해야합니다.

//Jquery 
$('.staff').change(function() { 
    var services = $('.service').empty(); 
    $('<option value="" disabled selected hidden>--Select Service--</option>').appendTo(services); 
    $.get('ajax_service.php', {tutor: $(this).val()}, function(result) { 
     $.each(JSON.parse(result), function(index, item) { 
      $('<optgroup label="' + index + '">').appendTo(services); 
       $.each(item, function (name, value) { 
        $('<option value="' + name + '">' + value + '</option>').appendTo(services); 
       }); 
      $('</optgroup>').appendTo(services); 
     }); 
    }); 
}); 

//ajax_service.php 
if(isset($_GET['staff'])) { 
    $staff_id = $_GET['staff']; 
    $sql = "SELECT c.category_id, c.category_name, s.service_id, s.service_name " 
     . "FROM service s " 
     . "INNER JOIN category c ON s.category_id = c.category_id " 
     . "WHERE s.staff_id = ? " 
     . "ORDER BY s.sort_order ASC"; 
    $stmt = $pdo->prepare($sql); 
    $stmt->execute(array($staff_id)); 
    $services = $stmt->fetchAll(); 
    $groups = array(); 
    foreach ($services as $service) { 
     $groups[$service['category_name']][$service['service_id']] = $service['service_name']; 
    } 
    echo json_encode($groups); 
} 

이 코드는 모든 범주 및 서비스를로드하지만 옵션 그룹이없는이 코드를 잘못 무엇 예상

결과 HTML 코드

<select class="service" name="ddlService" id="ddlService"> 
    <option value="" disabled="" selected="" hidden="">--Select Service--</option> 
    <optgroup label="Advertising"></optgroup> 
    <option value="1">Adware</option> 
    <option value="2">Brands</option> 
    <option value="3">Modeling</option> 
    <option value="4">Sponsorships</option> 
    <option value="5">Press Release</option> 
</select> 

등의 작품? 아무도 내가 문제를 추적하도록 도울 수 있습니까? 시간 내 주셔서 대단히 감사합니다.

Answer 1

//Jquery 
$('.staff').change(function() { 
    var services = $('.service'); 
    var html=''; 
    $('<option value="" disabled selected hidden>--Select Service--</option>').appendTo(services); 
    $.get('ajax_service.php', {tutor: $(this).val()}, function(result) { 

     $.each(JSON.parse(result), function(index, item) { 
      html+='<optgroup label="' + index + '">'; 

       $.each(item, function (name, value) { 
        html+= '<option value="' + name + '">' + value +'</option>'); 
       }); 
      html+= '</optgroup>'); 
     }); 
    }); 
services.append(html); 
});