JQuery를 사용하여 선택을 추가해야합니다.

Question

jQuery를 사용하여 HTML 선택 옵션을 추가해야합니다. 드롭 다운을 클릭하면 AJAX를 통해 하위 함수를 가져 오는 코드 조각이 있습니다. 이 작업이 완료되면 99의 값을 가진 다른 옵션 태그와 기타 하위 기능의 텍스트를 추가해야합니다. 내 코드 :

$.ajax({ 
    type: "POST", 
    data: {function_id: function_id}, 
    url: '<?php echo WEB_URL; ?>includes/ajax/target_audience_sub_functions.php', 
    dataType: 'json', 
    success: function(json) { 
     var $el = $("#target_audience_sub_function"); 
     $el.empty(); // remove old options 
     $el.append($("<option></option>").attr("value", '').text('Please Select')); 
     $.each(json, function(value, key) { 
      $el.append($("<option></option>").attr("value", value).text(key)); 
     }); 
     $el.append($("<option></option>").attr("value", '99').text('Other sub function')); 
    } 
}); 

$el.append 내가 다른 옵션 태그를 추가 할 것을 시도하고 코드이지만, 그것은 작동하지 않습니다. 나는 AJAX에서 가져온 것만 가져옵니다. 부수적으로 첫 번째 추가 기능은 작동하지 않습니다.

HTML

<div class="form-group"> 
    <label for="target_audience_sub_function">Sub-Function</label> 
        <select data-selectedSubFunction="<?php echo (isset($audience)) ? $audience['target_audience_sub_function'] : ''; ?>" class="form-control light_grey_bg ta_sub_function" id="target_audience_sub_function" name="target_audience_sub_function[]"> 
         <option value="">-- Choose sub function --</option> 
         <?php $get_functions = $db->get_all('sub_functions'); 
         foreach ($get_functions as $function) { ?> 
          <option value="<?php echo $function['sub_function_id']; ?>" <?php echo isset($audience) ? $audience['target_audience_sub_function'] == $function['sub_function_id'] ? "selected='selected'" : "" : ''; ?> ><?php echo $function['sub_function_name']; ?></option> 
         <?php } ?> 
        </select> 
       </div> 

Answer 1

귀하의 코드가 작동해야, 난 그냥 그것을 시도하고 당신이 그것을 원하는대로 선택이 채워되었다.

var json = { 
 
    0: 'Hello', 
 
    1: 'Bobby' 
 
}; 
 
$(function() { 
 
    var $el = $("#target_audience_sub_function"); 
 
    $el.click(function() { 
 
    $el.empty(); // remove old options 
 
    $el.append($("<option></option>").attr("value", '').text('Please Select')); 
 
    $.each(json, function(value, key) { 
 
     $el.append($("<option></option>").attr("value", value).text(key)); 
 
    }); 
 
    $el.append($("<option></option>").attr("value", '99').text('Other sub function')); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="target_audience_sub_function"></select>

아마 성공 콜백이 실행되지 않습니다 및 표시되는 옵션은 PHP에 의해 인쇄 된 하나입니까?