Как вывести список дочерних категорий при выборе родительской в виде выпадающего списка в форме?

Очень прошу помочь найти решение. За ранее благодарен.

Допустим есть три родительских категории

  • Зеленый, Красный, Общий

Нужно чтобы: При выборе родительской категории через сheckbox - подкатегории отобразились в виде выпадающего списка


Ответы (1 шт):

Автор решения: phpBear

Прямо под wp я Вам решение не дам т.к wp для меня далек, но в связке php + jQuery будет как-то так.

<label for="parent_cat_green"><input type="checkbox" id="parent_cat_green" data-val="green">Зеленый</label>
<label for="parent_cat_red"><input type="checkbox" id="parent_cat_red" data-val="red">Красный</label>
<label for="parent_cat_common"><input type="checkbox" id="parent_cat_common" data-val="common">Общий</label>
<select id="subcat_id"></select>
//Навешиваем обработчик на checkbox-ы
    $('#parent_cat_green,#parent_cat_red,#parent_cat_common').on('change', function(){
        //Если у checkbox-а стоит "галочка" - у остальных снимаем ее
        if ( $(this).is(':checked')) {
            $('input[type=checkbox][id^=parent_cat_][id!='+$(this).attr('id')+']').prop('checked',false)
            //Отправляем `ajax` запрос на сервер за получением списка под-категорий
            $.ajax({
                url: '/ajax/list?parent_cat='+$(this).data('val'),
                type: 'GET',
                cache: false,
                contentType: false,
                processData: false,
                error: function(req, text, error) {
                    alert(error);
                },
                success: function ( data ) {
                    if ( data ) {
                        if ( typeof data.success !== typeof undefined ) {
                            //Очищаем текущий список под-категорий
                            $('#subcat_id').empty();
                            for(var i = 0; i < data.list.length; i++ ) {
                                //Добавляем в список полученные варианты
                                $('#subcat_id').append($('<option/>', {
                                    value: data.list[i].id,
                                    text : data.list[i].value
                                }));
                            }
                        } else if ( typeof data.error !== typeof undefined ) {
                            alert('Error: '+data.message);
                        }
                    } else { alert('Unknown server response!'); }
                },
            });

        }
    });

Ну и собственно PHP

    public function List() {
        $data = new \stdClass();
        $data->error = true;
        $data->message = 'No `parent_cat` specicifed or wrong value!';
        if ( is_array( $_GET ) && isset($_GET['parent_cat']) && trim($_GET['parent_cat']) != '' && in_array($_GET['parent_cat'], ['green', 'red', 'common']) ) {
            unset($data->error);
            $data->success = true;
            $data->message = 'OK';
            if ( $_GET['parent_cat'] == 'green' ) {
                $data->list = [
                    ['id' => 'green1', 'value' => 'светло-зеленый'],
                    ['id' => 'green2', 'value' => 'темно-зеленый'],
                    ['id' => 'green3', 'value' => 'чутка зеленый'],
                    ['id' => 'green4', 'value' => 'салатовый'],
                ];
            }
            if ( $_GET['parent_cat'] == 'red' ) {
                $data->list = [
                    ['id' => 'red1', 'value' => 'светло-красный'],
                    ['id' => 'red2', 'value' => 'темно-красный'],
                    ['id' => 'red3', 'value' => 'чутка красный'],
                    ['id' => 'red4', 'value' => 'рубиновый'],
                ];
            }
            if ( $_GET['parent_cat'] == 'common' ) {
                $data->list = [
                    ['id' => 'common1', 'value' => 'серо-буро-малиновый'],
                    ['id' => 'common2', 'value' => 'детская неожиданность'],
                    ['id' => 'common3', 'value' => 'бабский(фуксия)'],
                    ['id' => 'common4', 'value' => 'брутальный'],
                ];
            }
        }
        echo json_ecode($data);
    }
→ Ссылка