This is my first attempt to create an ajax function.

My script takes the selected value of a dropdown list

      $('#state').change(function () {
           var state = $('#state option:selected').val();
                type: 'POST',
                url: 'http://localhost/website/wp-admin/admin-ajax.php',
                dataType: 'json',
                data: {
                    'action' : 'myFunction',
                    'state' : state
                success: function( data ){
                error: function (data) {
                    console.log('error' + data);

The value is received by a PHP function that uses it to pick the cities of selected state

   function myFunction(){
        $term_id = $_POST['state'];
        $taxonomy_name = 'state';
        $cities = get_term_children( $term_id, $taxonomy_name );

        foreach ( $cities as $city ) {
           $term = get_term_by( 'id', $city, $taxonomy_name );
           $list =  '<option value="'.$term->term_id.'">'.$term->name.'</option>';

        echo $list;

  add_action('wp_ajax_myFunction', 'myFunction');
  add_action('wp_ajax_nopriv_myFunction', 'myFunction');

But how to send all values ​​generated by foreach in a variable?

  • What do you mean by "send all values ​​generated by foreach in a variable"? Is console.log printing the data you expect? Commented May 23, 2014 at 19:06
  • @czerspalace I need to send all <option> tags generated by foreach to append on the page. But I don't know how to do this. Commented May 23, 2014 at 19:08
  • Maybe you could try returning it as JSON?
    – Nick Young
    Commented May 23, 2014 at 19:14
  • @NickYoung Nick, but how I could do that? Grab all <option>'s in one single variable? Commented May 23, 2014 at 19:19
  • echo json_encode( $list );
    – Nick Young
    Commented May 23, 2014 at 19:20

1 Answer 1


Ok so it actually looks like there is a couple of ways you could do this. The first one is by changing your $list into an array and returning it as JSON.

It will be easy to change $list to an array by just adding it like this:

$list[] =  '<option value="'.$term->term_id.'">'.$term->name.'</option>';

Then return it as JSON: echo json_encode( $list );

This may give you more flexibility within your JavaScript code if you need to perform other actions on specific options.

The other way you might go about this is keep the code as you have it. It looks like the way you currently have it setup you will get all of the added <option> tags in one giant string. This should be ok for jQuery to handle. You just need to do something with it in your response:

    success: function( data ){

That would add the giant long string of <option>s you got from the AJAX to be added as the HTML inside the <select> and </select> of your select box.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.