JQueryを使用して選択するために追加する必要があります

Question

jQueryを使用してHTML選択オプションを追加する必要があります。ドロップダウンがクリックされると、AJAXを介してサブ関数をフェッチするコードがあります。これが完了したら、99の値を持つ別のオプションタグとOtherサブ機能のテキストを追加する必要があります。私のコード：

$.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で印刷されたものをしていますか？