选择选项取决于 wordpress 管理页面中的其他选项答案

【问题标题】：select option depends other option in wordpress admin page选择选项取决于 wordpress 管理页面中的其他选项
【发布时间】：2017-06-22 18:22:21
【问题描述】：

我有两个选择类别和类型，类型应该取决于类别选择，来自数据库，这是我的代码。

HTML

    $ps_type_table_name = $wpdb->prefix . 'ps_type'; ?>

    <form method="post" action="">
     <label>Category :</label><br>
         <select id="category" name="category" 
         class="form-control">
               <?php
         $categories = $wpdb->get_col('SELECT DISTINCT category FROM '.$ps_type_table_name);
                 foreach ($categories as $category){ ?>

               <option value="<?php echo $category; ?>"><?php echo $category; ?></option>
                   <?php
                      }
                      ?>
             </select><br><br>

             <label>Types :</label><br>
            <select id="type" name="type" class="form-control">

           </select><br><br>
   </form>

阿贾克斯

$(document).ready(function(){
            $('#category').on('change',function(){
                var category = $(this).val();
                if(category){
                    $.ajax({
                        type:'POST',
                        url:'category-type-select.php',
                        data:'category_name='+category,
                            success:function (html) {
                        $('#type').html(html);
                    }
                    });
                }
            });
        });

PHP

 class Get_category_type{
 function __construct()
 {
if (isset($_POST['category_name']) && !empty($_POST['category_name'])) {
    global $wpdb;
    $category = $_POST['category_name'];
    $ps_type_table_name = $wpdb->prefix . 'ps_type';
    $types = $wpdb->get_col($wpdb->prepare('SELECT DISTINCT type FROM ' . $ps_type_table_name . ' WHERE category=%s', $category));

    foreach ($types as $type) {
        echo '<option value="' . $type . '">' . $type . '</option>';
    }
}
}

}

实际上，这是一个使用 oops 的 WordPress 插件，请帮我解决这个问题，我认为问题是在 ajax 代码中获取 PHP 文件，请告诉我如何在 ajax URL 中写入路径以在 WordPress 中获取该类文件插件

【问题讨论】：

您的浏览器控制台是否有任何错误
不，它没有显示任何错误，但在选择类型部分没有显示任何内容
我认为 __construct 函数只有在创建新对象实例时才会调用。所以你需要创建实例来运行构造函数。
如果我删除类并直接编写它也不起作用，我想我必须在 WordPress 中调用 PHP 文件的路径，例如：plugin_dir_path(FILE)/category -type-select.php，我不知道正确的写法
你当前的页面和category-type-select.php是在同一个目录还是在不同的目录？ @Deekshith Shetty

标签： php jquery html ajax wordpress

【解决方案1】：

问题是您正在替换选择元素的选项。您需要在 ajax php 中也有选择元素。

阿贾克斯：

$.ajax({
    type:'POST',
    url:'category-type-select.php',
    data:{category_name:category},
    success:function (html) {
                            //
    }
});

PHP：

$result='<select id="type" name="type" class="form-control">';
foreach ($types as $type) {
        $result.= '<option value="' . $type . '">' . $type . '</option>';
    }
$result.='</select>';

echo $result;

【讨论】：

不，它不起作用，它是一个 WordPress 插件，我认为问题在于 ajax URL 部分如何在 WordPress 内部的 Ajax 中调用 PHP 文件
好的，那么问题是别的。我用 ajax 数据部分更新了答案。就这样试试吧。
在控制台网络中你可以检查url。右键单击并在新标签中打开它。它显示数据吗？。
对不起，我没有得到你？
打开控制台并进入网络。然后更改类别中的选项。您可以在控制台中看到ajax url。右键单击并在新标签中打开它

【解决方案2】：

第一个：我认为__construct 函数只有在创建新对象实例时才会调用。所以你需要创建实例来运行构造函数。

class Get_category_type {

 function __construct()
 {
   if (isset($_POST['category_name']) && !empty($_POST['category_name'])) {
       global $wpdb;
       $category = $_POST['category_name'];
       $ps_type_table_name = $wpdb->prefix . 'ps_type';
       $types = $wpdb->get_col($wpdb->prepare('SELECT DISTINCT type FROM ' . 
       $ps_type_table_name . ' WHERE category=%s', $category));

      foreach ($types as $type) 
      {
         $result.= '<option value="' . $type . '">' . $type . '</option>';
      }
      echo  $result;
   }
 }

}

 $obj = new Get_category_type(); //create instance here .

第二个：不要在foreach内部回显，像这样在foreach之后回显

foreach ($types as $type) 
{
   $result.= '<option value="' . $type . '">' . $type . '</option>';
}
echo  $result;

第三：你需要像这样附加选项

  $('#type').empty();
  $('#type').append(html);

4th :数据应该在ajax中以正确的方式发送

    data:{category_name:category},

5th : 在 ajax 中添加错误处理程序

$.ajax({
    type:'POST',
    url:'category-type-select.php',
    data:{category_name=category},
    success:function (html) {
         $('#type').empty();
         $('#type').append(html);
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
});

测试目的：

出于测试目的。将您的 POST 方法更改为 GET 方法，如 if (isset($_GET['category_name']) && !empty($_GET['category_name'])) { .. } 然后直接在浏览器中调用 url，如下所示。 http://yoursite.com/category-type-select.php?category_name=here_any_one_category_name 。如果它运行了，那么 porblem 就在你的 ajax 部分。

【讨论】：

它不起作用兄弟，我想我必须在 WordPress 中调用 PHP 文件的路径，例如：plugin_dir_path(FILE)/category-type-select.php，我不知道正确的写作方式它——
按 F12 打开开发者工具并导航控制台。并更改您选择框上的内容。现在您可以看到任何日志（如果存在）。 @DeekshithShetty
用于测试目的。更改您的 POST 方法以获取这样的方法 if (isset($_GET['category_name']) && !empty($_GET['category_name'])) { .. }然后像这样在浏览器中直接调用url。 yoursite.com/… 。如果它已运行，则 porblem 在您的 ajax 部分中。 @DeekshithShetty
看看我的回答并按照所有步骤获得成功@DeekshithShetty
这是wordpress文件，我可以运行它，给出直接路径吗？

【解决方案3】：

我得到了我的问题的解决方案，所以我发布答案来帮助一些需要的人，在 WordPress 中，有一个单独的钩子可以使用 ajax 函数，以及这个过程如何使用它。

HTML

 $ps_type_table_name = $wpdb->prefix . 'ps_type'; ?>

<form method="post" action="">
 <label>Category :</label><br>
     <select id="category" name="category" 
     class="form-control">

           <?php
           $categories = $wpdb->get_col('SELECT DISTINCT category FROM '.$ps_type_table_name);
             foreach ($categories as $category){ ?>

       <option value="<?php echo $category; ?>"><?php echo $category; ?></option>

               <?php
                  }
                  ?>

         </select><br><br>

         <label>Types :</label><br>
        <select id="type" name="type" class="form-control">

       </select><br><br>

通过更改第一个选项来获取第二个选项值的 PHP 代码

 public function get_type_by_category(){
    //echo file_get_contents('php://input'); for testing
    if (isset($_POST['ctgry']) && !empty($_POST['ctgry'])) {
        global $wpdb;
        $result = "";
        $category = $_POST['ctgry'];
        $ps_type_table_name = $wpdb->prefix . 'ps_type';
        $types = $wpdb->get_col($wpdb->prepare('SELECT DISTINCT type FROM ' . $ps_type_table_name . ' WHERE category=%s', $category));

        foreach ($types as $type) {
            $result .= '<option value="' . $type . '">' . $type . '</option>';
        }
        echo $result;
    }
}

将此函数与 wordpress 挂钩

    add_action('wp_ajax_get_type_by_category','get_type_by_category');
    add_action('wp_ajax_nopriv_get_type_by_category','get_type_by_category');

Ajax.js

   $(document).ready(function () {
   $('#category').change(function(){
    var ctgry=$(this).val();
    $.ajax({
        type:"post",
        url:ajaxurl,
        data:{'action':'get_type_by_category','ctgry':ctgry},
        cache:false,
        success:function (html) {
            $("#type").html(html);
            //alert(html);
        },
        error:function(request,string_error,error){
            alert(string_error);
        }

    });
});
$('#category').change();
});

将 js 与 WordPress 挂钩

    public function enqueue_scripts(){
 wp_enqueue_script('ps-admin-page-js', plugins_url('js/admin-page.js', dirname(__FILE__)),array('jquery'),'1.1.1',true);
 }
 add_action('wp_footer', 'enqueue_scripts');

我发现了这种在 WordPress 插件开发中使用 ajax 的方法，它对我有用。

【讨论】：