无法在Wordpress中使用AJAX填充选择字段-更新

Question

UPDATE: My ajax function for handling the response is correct, but I have a hard time to iterate through the response object and populate the select field. I've tried and with for loop instead of each() and is working better but the select field was populated with "undefined". Any ideas?

Below is my Jquery code

jQuery(document).ready(function() {
    // Avoid conflicts
    $ = jQuery;

    $('#nomoi-select').change(function() {
        var nomos_name = $('#nomoi-select option:selected').attr('id');
        var jsonMimeType = "application/json;charset=UTF-8";

        type = 'POST';
        data = { 'parent_id': nomos_name, action : 'get_child_categories' };
        dataType = 'json';
        contentType = "application/json; charset=utf-8";
        processData = false;
        $.post( ajaxurl, data, function(response) {
            if( response ){
                console.log(response);
                var content = '';

                var data = JSON.stringify(response);
                $(data).each(function(key, value) {
                    content += '<option>' + value + '</option>';
                });
                $(content).appendTo("#town-select");
            }
        });
    }).change();
});

My ajax function:

function get_child_categories() {

  if (isset($_POST['parent_id'])) {
    $parent_id = ($_POST['parent_id']);
    $result = array();

    $args = array(
      'post_type' => 'seller',
      'order_by' => 'name',
      'hide_empty' => 0,
      'exclude' => 1,
      'taxonomy' => 'nomos',
      'hierarchical' => 1,
      'child_of' => $parent_id
    );

    $categories =  get_categories( $args );
    foreach ( $categories as $cat ) {

      $result = array(
        'town_id' => $cat->cat_ID,
        'town_name' => $cat->cat_name
      );
      echo json_encode($result);
    }
  }
  die();
}


add_action('wp_ajax_get_child_categories', 'get_child_categories');
add_action('wp_ajax_nopriv_get_child_categories', 'get_child_categories');

The OnChange is working fine and I get the following output from log:

{"town_id":"41","town_name":"\u0391\u0393\u0393\u0395\u039b\u039f\u039a\u0391\u03a3\u03a4\u03a1\u039f"}{"town_id":"42","town_name":"\u0391\u0393\u03a1\u0399\u039d\u0399\u039f"}{"town_id":"40","town_name":"\u0391\u0399\u03a4\u03a9\u039b\u0399\u039a\u039f"}{"town_id":"84","town_name":"\u0391\u039b\u03a5\u0396\u0399\u0391"}{"town_id":"85","town_name":"\u0391\u039c\u03a6\u0399\u039b\u039f\u03a7\u0399\u0391"}{"town_id":"86","town_name":"\u0391\u039d\u0391\u039a\u03a4\u039f\u03a1\u0399\u039f"}{"town_id":"87","town_name":"\u0391\u039d\u03a4\u0399\u03a1\u03a1\u0399\u039f"}{"town_id":"88","town_name":"\u0391\u03a0\u039f\u0394\u039f\u03a4\u0399\u0391"}{"town_id":"89","town_name":"\u0391\u03a1\u0391\u039a\u03a5\u039d\u0398\u039f\u03a3"}{"town_id":"90","town_name":"\u0391\u03a3\u03a4\u0391\u039a\u039f\u03a3"}{"town_id":"91","town_name":"\u0398\u0395\u03a1\u039c\u039f"}{"town_id":"92","town_name":"\u0398\u0395\u03a3\u03a4\u0399\u0395\u03a9\u039d"}{"town_id":"93","town_name":"\u0399\u0395\u03a1\u0391\u03a3 \u03a0\u039f\u039b\u0397\u03a3 \u039c\u0395\u03a3\u039f\u039b\u039f\u0393\u0393\u0399\u039f\u03a5"}{"town_id":"94","town_name":"\u0399\u039d\u0391\u03a7\u039f\u03a5"}{"town_id":"95","town_name":"\u039c\u0391\u039a\u03a1\u03a5\u039d\u0395\u0399\u0391\u03a3"}{"town_id":"96","town_name":"\u039c\u0395\u0394\u0395\u03a9\u039d\u039f\u03a3"}{"town_id":"97","town_name":"\u039c\u0395\u039d\u0399\u0394\u0399\u039f\u03a5"}{"town_id":"98","town_name":"\u039d\u0391\u03a5\u03a0\u0391\u039a\u03a4\u039f\u03a5"}{"town_id":"99","town_name":"\u039d\u0395\u0391\u03a0\u039f\u039b\u0397\u03a3"}{"town_id":"100","town_name":"\u039f\u0399\u039d\u0399\u0391\u0394\u03a9\u039d"}{"town_id":"101","town_name":"\u03a0\u0391\u039b\u0391\u0399\u03a1\u039f\u03a5"}{"town_id":"102","town_name":"\u03a0\u0391\u039d\u0391\u0399\u03a4\u03a9\u039b\u0399\u039a\u039f\u03a5"}{"town_id":"103","town_name":"\u03a0\u0391\u03a1\u0391\u0392\u039f\u039b\u0391\u03a3"}{"town_id":"104","town_name":"\u03a0\u0391\u03a1\u0391\u039a\u0391\u039c\u03a0\u03a5\u039b\u0399\u03a9\u039d"}{"town_id":"105","town_name":"\u03a0\u039b\u0391\u03a4\u0391\u039d\u039f\u03a5"}{"town_id":"106","town_name":"\u03a0\u03a5\u039b\u039b\u0397\u039d\u0397\u03a3"}{"town_id":"107","town_name":"\u03a3\u03a4\u03a1\u0391\u03a4\u039f\u03a5"}{"town_id":"108","town_name":"\u03a6\u03a5\u03a4\u0395\u0399\u03a9\u039d"}{"town_id":"109","town_name":"\u03a7\u0391\u039b\u039a\u0395\u0399\u0391\u03a3"}

Answer 1

Taking the hint from Tom Kriek:

You could always build all of the tags inside the php script,and then return that to the function. This saves you iterating it on the ajax side. All you have to do then is stick the html in the right spot. Namely in the select tag.

I've used $(#town-select).html(response); in the JQuery response and worked perfectly. Thanx everybody!