AJAX无法在选择字段中工作 - 更新

I've made a form with two select fields. The first field is populated with the parents of a custom taxonomy. The second field is populated with the children of each one. I used AJAX to do that but does not seem to work. Nothing happens on change.

Below is my PHP code:

function products_selection()
{
    $args = array(
      'post_type'   => 'seller',
      'taxonomy'    => 'category',
      'hide_empty'  => 0,
      'exclude'     => 1,1078,1079
    );
    $products = get_categories( $args );

    if ( $products ) {
    echo '<select id="products-select">';
      echo '<option selected="" disabled="" value="0"><span>Προϊόντα</span></option>';

      foreach ($products as $product) {
        echo '<option class="product-name" id="'. $product->term_id .'">'. $product->name .'</option>';
      }
    echo '</select>';
  }
}

function nomoi()
{
  $args = array(
    'post_type' => 'seller',
    'taxonomy'  => 'nomos',
    'hide_empty'=> 0,
    'parent'    => 0
  );

  $categories = get_categories( $args );

  if ( $categories ) {
    echo '<select id="nomoi-select">';
      echo '<option selected="0" value="-1"><span>Νομοί</span></option>';

      foreach ( $categories as $category ) {
        $id = $category->term_id;
        $name = $category->name;
        $taxonomy = $category->taxonomy;
        echo '<option class="nomos" id="'. $id .'">'. $name .'</option>';
      }
    echo '</select>';
  }

  echo '<select id="town-select">';
    echo '<option selected="" disabled="" value="0"><span>Πόλεις</span></option>';
  echo '</select>';
}

function my_ajax() {
  if(isset($_POST['main_catid']))
    {
      $args = array(
        'order_by' => 'name',
        'hide_empty' => 0,
        'exclude' => 1,
        'taxonomy' => 'nomos',
        'name' => 'town-select',
        'hierarchical' => 1,
        'show_option_none' => 'Πόλεις',
        'selected' => -1,
        'child_of' => $_POST['main_catid'],
        'echo' => 1
      );
    $categories =  get_categories( $args );
    foreach ( $categories as $cat ) {
      $cat_name = $cat->name;
      $id = $cat->cat_ID;
      echo '<option class="town" id="'. $category->id .'">'. $category->name .'</option>';
    }
  die();
  } // end if
}

My script:

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

        $('#nomoi-select').change(function() {

            $mainCat = $('#nomoi-select option:selected').attr('id');
            console.log('$mainCat: ' + $mainCat);

            // call ajax
            $("#town-select").empty();
            $.ajax
            (
                {
                    url:'index.php',
                    type:'POST',
                    // Use an object literal
                    data: {
                        "action" : "my_ajax()",
                        "main_catid" : $mainCat
                    },

                    success:function( results )
                    {
                        //  alert(results);
                         alert('Successfully called');
                        $("#town-select").append( results );
                    },

                    error:function( exception )
                    {
                        alert('Exception: ' + exception);
                    }
                }
            );
        });
    });

And the function to register my script:

function my_scripts() {
  wp_enqueue_script( 'header-form', get_template_directory_uri() . '/js/headerform.js', array(), '1.0.0', true );
    }

add_action( 'wp_enqueue_scripts', 'my_scripts' );

Since you are working with WordPress, I suspect you could be having jQuery conflict issues. To confirm this, you can try changing all instances of $ to jQuery and see if you get the same errors.

Also - if you are running this script from a .js file, the PHP wont evaluate, but keeping the URL relative should still work fine.

I have made a few changes to the script which you can try:

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

    $('#main_cat').change(function() {

        $mainCat = $('#main_cat option:selected').val();

        // call ajax
        $("#sub_cat").empty();
        $.ajax
        (
            {
                url:"/wp-admin/admin-ajax.php",
                type:'POST',
                // Use an object literal
                data: {
                  "action" : "my_ajax",
                  "main_catid" : $mainCat
                },

                success:function( results )
                {
                    //  alert(results);
                    $("#sub_cat").removeAttr("disabled").append( results );
                }
            }
        );
    });
});

From the fiddle you provided, simply adding console.log('$mainCat: ' + $mainCat); (see this modified fiddle) ensures that the change event fires as expected.
Beyond that we get a 404 not found error, which is pretty normal in the current state of the fiddle example.

So it is certain that your issue comes from something with the Ajax called script or its returned data.

You only said that "Nothing happens on change", without any precision. In fact you should now use Firebug or similar to look at error messages, which may be, either:

• an URL generation error: in this case you should get a 404 not found error too
• an error in the server script you're invoking: in this case you should get a 500 server error error
• a bad (malformed) return from the server: in this case you should get a JS error

Also note that:

• it cannot be an empty return from the server, or your #sub_cat element would have already lost its disabled attribute before a JS error happens
• at the opposite (even if unlikely) it also might be an Ajax error: so to be sure you should add an error: or always: member to the $.ajax() argument