我有两个具有父类别和子类别的数组,每个数组都出现在一个选择列表中,如何使子类别仅显示其父类别中的项目?
- <?PHP $carMakes = array(
- 'show_option_all' => '','show_option_none' => ('All Makes'),'orderby' => 'ID','order' => 'ASC','show_count' => 0,'hide_empty' => 1,'child_of' => 25,'exclude' => 0,'echo' => 1,'selected' => 0,'hierarchical' => 0,'name' => 'cat','id' => '','class' => 'postform','depth' => 0,'tab_index' => 0,'taxonomy' => 'category','hide_if_empty' => false
- ); ?>
- <?PHP $carModels = array(
- 'name' => 'subcat','hierarchical' => 1,'parent' => get_cat_id('model'),'show_option_none' => ('All Models'),'hide_empty' => 0 );
- ?>
- <?PHP wp_dropdown_categories($carMakes); ?>
- <?PHP wp_dropdown_categories($carModels); ?>
例如,只需要展示属于汽车的汽车模型
- Make=Toyota Model=Supra
- Model=Corolla
- Model=Tundra
以下是类别结构的示例
- Make (parent category)
- -Toyota
- -Nissan
- -Mazda
- -Ford
- Model (parent category)
- -Supra
- -Skyline
- -Mustang
- -Rx7
- -Corolla
一直想使用Ajax对链式选择进行练习,所以,在这里我们去;)
这是一个完整的插件,应该安装在wp-content / plugins / your-plugin-name文件夹中.由三个文件组成,插件本身,Javascript文件和Ajax加载器映像.
- <?PHP
- if( class_exists( 'BRSFL_Chained_Selection' ) ) {
- // Parameters: ( $cat_id,$dropdown_text )
- BRSFL_Chained_Selection::print_cats( 1,'All Makes' );
- }
- ?>
另外,根据需要调整两次调用wp_dropdown_categories.查看代码注释以获取详细信息.
子类别下拉列表会根据类别下拉列表中的更改进行修改:
链-categories.PHP
- <?PHP
- /**
- * Plugin Name: Chained Categories
- * Plugin URI: https://stackoverflow.com/q/15748968/1287812
- * Description: Demonstration of chained categories with Ajax.
- * Plugin structure based on <a href="https://gist.github.com/3804204">Plugin Class Demo</a>,by Thomas Scholz.
- * Use the dropdowns in the theme with this PHP method call: BRSFL_Chained_Selection::print_cats();
- * Author: Rodolfo Buaiz
- * Author URI: http://wordpress.stackexchange.com/users/12615/brasofilo
- */
- add_action(
- 'plugins_loaded',array ( BRSFL_Chained_Selection::get_instance(),'plugin_setup' )
- );
- class BRSFL_Chained_Selection
- {
- /**
- * Plugin instance.
- *
- * @see get_instance()
- * @type object
- */
- protected static $instance = NULL;
- /**
- * URL to this plugin's directory.
- *
- * @type string
- */
- public $plugin_url = '';
- /**
- * Path to this plugin's directory.
- *
- * @type string
- */
- public $plugin_path = '';
- /**
- * Access this plugin’s working instance
- *
- * @wp-hook plugins_loaded
- * @since 2012.09.13
- * @return object of this class
- */
- public static function get_instance()
- {
- NULL === self::$instance and self::$instance = new self;
- return self::$instance;
- }
- /**
- * Used for regular plugin work.
- *
- * @wp-hook plugins_loaded
- * @since 2012.09.10
- * @return void
- */
- public function plugin_setup()
- {
- $this->plugin_url = plugins_url( '/',__FILE__ );
- $this->plugin_path = plugin_dir_path( __FILE__ );
- $this->load_language( 'chainedselections' );
- add_action( 'wp_enqueue_scripts',array( $this,'script_enqueuer' ) );
- add_action( 'wp_ajax_custom_query','custom_query' ) );
- add_action( 'wp_ajax_nopriv_custom_query','custom_query' ) );
- }
- /**
- * Constructor. Intentionally left empty and public.
- *
- * @see plugin_setup()
- * @since 2012.09.12
- */
- public function __construct() {}
- /**
- * Enqueue frontend scripts
- */
- public function script_enqueuer()
- {
- wp_register_script(
- 'ajax-quote',plugin_dir_url( __FILE__ ) . '/ajax.js',array( 'jquery' )
- );
- wp_enqueue_script( 'ajax-quote' );
- wp_localize_script(
- 'ajax-quote','wp_ajax',array(
- 'ajaxurl' => admin_url( 'admin-ajax.PHP' ),'ajaxnonce' => wp_create_nonce( 'ajax_chained_selection_validate' ),'icon' => plugin_dir_url( __FILE__ ) . '/ajax-loader.gif'
- )
- );
- }
- /**
- * Ajax create sub-categories dropdown
- */
- public function custom_query()
- {
- // Security
- check_ajax_referer( 'ajax_chained_selection_validate','security' );
- // Check if jQuery posted the data
- if( !isset( $_POST[ 'chained_subcat_id' ] ) )
- return false;
- // Adjust parameters
- $carMakes = array(
- 'show_option_all' => '','show_option_none' => 'All ' . $_POST[ 'chained_subcat_name' ],'hide_empty' => 0,'child_of' => $_POST[ 'chained_subcat_id' ],'name' => 'chained-subcontainer','depth' => 1,'hide_if_empty' => false
- );
- // Print sub-categories
- wp_dropdown_categories( $carMakes );
- exit();
- }
- /**
- * Loads translation file.
- *
- * Accessible to other classes to load different language files (admin and
- * front-end for example).
- *
- * @wp-hook init
- * @param string $domain
- * @since 2012.09.11
- * @return void
- */
- public function load_language( $domain )
- {
- $locale = apply_filters( 'plugin_locale',get_locale(),$domain );
- // Load translation from wp-content/languages if exist
- load_textdomain(
- $domain,WP_LANG_DIR . $domain . '-' . $locale . '.mo'
- );
- // Load regular plugin translation
- load_plugin_textdomain(
- $domain,FALSE,$this->plugin_path . '/languages'
- );
- }
- /**
- * Print the dropdown in the frontend
- */
- public static function print_cats( $cat_id,$dropdown_text )
- {
- // Adjust parameters
- $carMakes = array(
- 'show_option_all' => '','show_option_none' => $dropdown_text,'child_of' => $cat_id,'name' => 'chained-categories','hide_if_empty' => false
- );
- // Print categories
- wp_dropdown_categories( $carMakes );
- // Empty dropdown for sub-categories
- echo '<div id="chained-subcontainer">
- <select name="chained-subcategories" id="chained-subcategories">
- <option value="">- Select a category first -</option>
- </select>
- </div>';
- }
- }
ajax.js
- jQuery( document ).ready( function( $)
- {
- var data = {
- action: 'custom_query',security: wp_ajax.ajaxnonce
- };
- $( "#chained-categories" ).on( "change",function( e )
- {
- // Add specific data to the variable,used to query the sub-categories
- data[ 'chained_subcat_id' ] = $( this ).val();
- data[ 'chained_subcat_name' ] = $(
- '#chained-categories option[value='
- + $( this ).val()
- + ']'
- ).text();
- // A sub-category was selected
- if( $( this ).val() > 0 )
- {
- // Ajax loader icon
- $( '#chained-subcontainer' ).html( '<img src="' + wp_ajax.icon + '">' );
- // Ajax call
- $.post(
- wp_ajax.ajaxurl,data,// No error checking is being done with the response
- function( response )
- {
- $( '#chained-subcontainer' ).html( response );
- }
- );
- }
- // No selection,show default
- else
- {
- $( '#chained-subcontainer' ).html( '<select name="chained-subcategories" id="chained-subcategories"><option value="">- Select a category first -</option></select>' );
- }
- });
- } );
Ajax的loader.gif