Как сделать вывод списка выбора зависимым от родительского списка?

Всегда хотел выполнить упражнение по прикованным выборам с помощью 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: http://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', array( $this, 'custom_query' ) ); add_action( 'wp_ajax_nopriv_custom_query', array( $this, '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' ], 'orderby' => 'ID', 'order' => 'ASC', 'show_count' => 0, 'hide_empty' => 0, 'exclude' => 0, 'echo' => 1, 'selected' => 0, 'child_of' => $_POST[ 'chained_subcat_id' ], 'hierarchical' => 1, 'name' => 'chained-subcontainer', 'id' => '', 'class' => 'postform', 'depth' => 1, 'tab_index' => 0, 'taxonomy' => 'category', '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, 'orderby' => 'ID', 'order' => 'ASC', 'show_count' => 0, 'hide_empty' => 0, 'exclude' => 0, 'echo' => 1, 'selected' => 0, 'child_of' => $cat_id, 'hierarchical' => 1, 'name' => 'chained-categories', 'id' => '', 'class' => 'postform', 'depth' => 1, 'tab_index' => 0, 'taxonomy' => 'category', '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

Почему бы не использовать объекты? Вам нужна фабрика для производства автомобилей.

отличная ссылка: http://sourcemaking.com/creation_patterns

Мне также нравится думать о том, чтобы держать объекты маленькими, простыми и делать как можно меньше. Перерыв функции до простых понятий, таких как «сделать» и «показать». Это делает их взаимозаменяемыми и расширяемыми. В конечном итоге вы сможете просто запросить $ this-> model->

Я бы подошел так:

1 объект для организации данных // model

другой – для сборки ваших строк // controller

другой для отображения // view

Чтобы начать смотреть на это так, сначала напишите некоторые функции, чтобы понять, что вы хотите знать.

 foreach (make)->show(models); 

Вы можете обнаружить, что вам нужно запрашивать данные по-разному … Другими словами, задайте db более конкретный вопрос, а не фильтруйте его после того, как вы его получили. Может быть, фильтрация теперь кажется более быстрой, но сколько еще вопросов и фильтрации вам нужно будет сделать позже?

Еще один комментарий: php более регулярен, а javascript больше чувствует. Я говорю, чтобы решить проблемы в их наиболее подходящем и простейшем контексте с помощью php по этой проблеме.

Единственный способ сделать это без AJAX – это получить список всех ваших «Make» категорий, а затем создать раскрывающийся список для каждой «Модели» каждого «Make», используя wp_dropdown_categories () с параметром child_of. Скройте все выпадающие меню «Сделать» при загрузке страницы, присоедините обработчик события изменения к выпадающему меню «Сделать», и когда он будет вызван, покажите соответствующее раскрывающееся меню «Модель», скрывая все остальное. Отображение / скрытие может быть выполнено с помощью jQuery или чистого JS. В каждом раскрывающемся списке «Модель» должен быть уникальный идентификатор, который можно использовать для определения того, к какому «Make» он принадлежит.