AJAX在选择字段中不起作用-更新_JavaScript

我制作了一个带有两个选择字段的表单。 第一个字段填充有自定义分类法的父级。 第二个字段填充有每个字段的子级。 我用AJAX做到了，但似乎没有用。 改变没有任何反应。

以下是我的PHP代码：

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
}

我的剧本：

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);
                    }
                }
            );
        });
    });

和注册我的脚本的功能：

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' );

由于您正在使用WordPress，因此我怀疑您可能遇到jQuery冲突问题。 为了确认这一点，您可以尝试将$所有实例更改为jQuery ，看看是否遇到相同的错误。

另外-如果您是从.js文件运行此脚本，则PHP不会评估，但保持URL相对应仍然可以正常工作。

我对脚本进行了一些更改，可以尝试：

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 );
                }
            }
        );
    });
});

从您提供的小提琴中，只需添加console.log('$mainCat: ' + $mainCat); （请参阅）确保change事件按预期触发。
除此之外，我们还会收到404 not found错误，这在小提琴示例的当前状态下非常正常。

因此可以肯定，您的问题是由Ajax脚本或返回的数据引起的。

您只是说“没有任何变化”，没有任何精确度。 实际上，您现在应该使用Firebug或类似工具查看错误消息，可能是：

URL生成错误：在这种情况下，您也应该得到404 not found错误
您正在调用的服务器脚本中的错误：在这种情况下，您应该得到500 server error错误
服务器返回的错误（格式错误）：在这种情况下，您应该收到JS错误

另请注意：

它不能是来自服务器的空返回，否则您的#sub_cat元素在发生JS错误之前将已经失去其disabled属性
相反（即使不太可能）也可能是Ajax错误：因此请确保您应该在$.ajax()参数中添加error: or always:成员。

AJAX在选择字段中不起作用-更新

问题描述

1楼

2楼