Как передать значение из Select2 в другую функцию?

Question

[Irinka95]

Всем привет. Подскажите, пожалуйста, как мне передать выбранное значение из Select2 в другую функцию фильтрации? (Все коды нашла на просторах интернета и пытаюсь объединить).
Здесь из базы получаем список городов

$(document).ready(function(){
            $(".city").select2({
                ajax: {
                    url: "/ajax.php?action=main&type=get_city",
                    type: "post",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            searchTerm: params.term
                        };
                    },
                    processResults: function (response) {
                        return {
                            results: response
                        };
                    },
                    cache: true
                }
				
            });
        });

Здесь производим фильтрацию по категории и городу (значение города извлекается, в консоли выводится, но не передается дальше в фильтр)

$(document).ready(function () {

    getFilter();

    function getFilter() {
        let action = 'get_data';
        let category = filterCategory('category');
        let city = filterCity(); // первый вариант
        let city = filterCity(city); // второй вариант
        $.ajax({
            url: '/ajax.php?action=main&type=get_data',
            method: 'POST',
            data: { action: action, category: category, city: city },
            success: function (response) {
                $('#filterResults').html(response);
            }
        });
    }
    function filterCategory(classname) {
        let filter = [];
        $('.' + classname + ':checked').each(function () {
            filter.push($(this).val());
        });
        return filter;
    }
// Пробую извлечь значение выбранного селекта и передать в функцию (первый варинт)
$('.city').on('select2:select', function(e) {
    filterCity(this.value);
});
	
function filterCity(city){
	var a = city;
	console.log(a);
}
// конец

//второй вариант
function filterCity(classname) {
		$('.' + classname).on("select2:select", function () {
		filter = (this.value);
		 console.log(filter);
         });
        return filter;
    }
//конец
    $('.filter_click').click(function () {

        getFilter();
    });
});

Answer 1

[catch-a-chalk]

Привет!

$(document).ready(function() {
    // инициализация Select2
    $(".city").select2({
        ajax: {
            url: "/ajax.php?action=main&type=get_city",
            type: "post",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    searchTerm: params.term
                };
            },
            processResults: function(response) {
                return {
                    results: response
                };
            },
            cache: true
        }
    });

    // глобальная переменная для хранения выбранного города
    let selectedCity = null;

    // обработчик выбора города
    $('.city').on('select2:select', function(e) {
        selectedCity = e.params.data.id; // или e.params.data.text в зависимости от того, что нужно
        console.log("Выбран город:", selectedCity);
    });

    // основная функция фильтрации
    function getFilter() {
        let action = 'get_data';
        let category = filterCategory('category');
        let city = selectedCity; // используем сохраненное значение города
        
        $.ajax({
            url: '/ajax.php?action=main&type=get_data',
            method: 'POST',
            data: { 
                action: action, 
                category: category, 
                city: city 
            },
            success: function(response) {
                $('#filterResults').html(response);
            }
        });
    }

    function filterCategory(classname) {
        let filter = [];
        $('.' + classname + ':checked').each(function() {
            filter.push($(this).val());
        });
        return filter;
    }

    $('.filter_click').click(function() {
        getFilter();
    });
});

Comments

[Irinka95]

Проверила, работает, спасибо! Но есть одна странность..
При загрузке страницы выдает все статьи (так и нужно, без различных фильтров)
Если выбирать чекбоксы только фильтра по категории, то отрабатывает тоже хорошо
Но если изначально выбрать город, то ничего не меняется, все данные на странице те же, другие города не отсеиваются пока не выбрать категорию, это в чем может быть проблема?

[Irinka95]

Не знаю насколько правильно, проблему решила методом тыка..
Вернула на старое место вызов функции getFilter(); дабы не дублировать вывод из php
+ добавила вызов функции getFilter(); при выборе города, почему она не срабатывает именно при выборе города при клике на класс filter_click не понятно, при фильтрации категорий работает как нужно. В общем код по итогу такой

$(document).ready(function() {
    // инициализация Select2
    $(".city").select2({
        ajax: {
            url: "/ajax.php?action=main&type=get_city",
            type: "post",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    searchTerm: params.term
                };
            },
            processResults: function(response) {
                return {
                    results: response
                };
            },
            cache: true
        }
    });

    // глобальная переменная для хранения выбранного города
    let selectedCity = null;

    // обработчик выбора города
    $('.city').on('select2:select', function(e) {
        selectedCity = e.params.data.id; // или e.params.data.text в зависимости от того, что нужно
		getFilter();
        //console.log("Выбран город:", selectedCity);
    });
    
	getFilter();
	
    // основная функция фильтрации
    function getFilter() {
        let action = 'get_data';
        let category = filterCategory('category');
        let city = selectedCity; // используем сохраненное значение города
        
        $.ajax({
            url: '/ajax.php?action=main&type=get_data',
            method: 'POST',
            data: { 
                action: action, 
                category: category, 
                city: city 
            },
            success: function(response) {
                $('#filterResults').html(response);
            }
        });
    }

    function filterCategory(classname) {
        let filter = [];
        $('.' + classname + ':checked').each(function() {
            filter.push($(this).val());
        });
        return filter;
    }

    $('.filter_click').click(function() {
        getFilter();
    });
});

[catch-a-chalk]

Irinka95, изначально selectedCity равен null, поэтому серверная часть может считывать выбор только города все еще null

[catch-a-chalk]

Irinka95,

$(document).ready(function() {
    $(".city").select2({
        ajax: {
            url: "/ajax.php?action=main&type=get_city",
            type: "post",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    searchTerm: params.term
                };
            },
            processResults: function(response) {
                return {
                    results: response
                };
            },
            cache: true
        },
        placeholder: "Выберите город", 
        allowClear: true
    });

    let selectedCity = null;

    $('.city').on('select2:select', function(e) {
        selectedCity = e.params.data.id;
        console.log("Выбран город:", selectedCity);
        getFilter(); // вызываем фильтрацию сразу при выборе города
    });

    // обработчик очистки выбора города
    $('.city').on('select2:unselect', function() {
        selectedCity = null;
        console.log("Город сброшен");
        getFilter();
    });

    function getFilter() {
        let action = 'get_data';
        let category = filterCategory('category');
        
        $.ajax({
            url: '/ajax.php?action=main&type=get_data',
            method: 'POST',
            data: { 
                action: action, 
                category: category, 
                city: selectedCity
            },
            success: function(response) {
                $('#filterResults').html(response);
            }
        });
    }

    function filterCategory(classname) {
        let filter = [];
        $('.' + classname + ':checked').each(function() {
            filter.push($(this).val());
        });
        return filter.length ? filter : null;
    }

    $('.filter_click').click(function() {
        getFilter();
    });
});

[Irinka95]

catch-a-chalk, у меня мой вариант сработал, что выше сбрасывала. Большое Вам спасибо, что откликнулись.
У меня как раз в серверной части и идет первая проверка на if(!empty), проверяет если пусто, то выводит без всяких фильтров

[Irinka95]

catch-a-chalk, Кстати, сейчас проверила этот вариант, не работает пока опять же не выберешь город (при загрузке белый экран), видимо не дружит какая-то проверка с серверной частью..
Если вернуть функцию getFilter(); на место, то уже начинает работать, но при отображении включенном ошибок php выдает implode(): Invalid arguments passed in, это из-за return filter.length ? filter : null;, т.к. в серверной части у меня сразу принимается массив (у статьи может быть несколько категорий и ищу я их через LIKE, если это правильно конечно..)

if (isset($_POST['category'])) {
	$filters = [];
	$category = implode("%' OR `a`.`p_categories` LIKE '%", $_POST['category']);
    $filters[] = "(`a`.`p_categories` LIKE '%{$category}%')";
	if (!empty($filters)) {
    $sql .= " AND " . implode(" AND ", $filters);
    }	
}

[catch-a-chalk]

Irinka95, сейчас не у монитора, ну тут я уже решил придти к помощи нейронки, вот что выдает:

$(document).ready(function() {
    // 1. Инициализация Select2
    $(".city").select2({
        ajax: {
            url: "/ajax.php?action=main&type=get_city",
            type: "post",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    searchTerm: params.term
                };
            },
            processResults: function(response) {
                return {
                    results: response
                };
            },
            cache: true
        },
        placeholder: "Выберите город",
        allowClear: true
    });

    // 2. Переменные состояния
    let selectedCity = null;
    let selectedCategories = [];

    // 3. Загрузка данных при старте (без фильтров)
    loadArticles();

    // 4. Обработчики событий
    $('.city').on('change', function() {
        selectedCity = $(this).val();
        loadArticles();
    });

    $('.category').on('change', function() {
        selectedCategories = $('.category:checked').map(function() {
            return $(this).val();
        }).get();
        loadArticles();
    });

    // 5. Основная функция загрузки
    function loadArticles() {
        $.ajax({
            url: '/ajax.php?action=main&type=get_data',
            method: 'POST',
            data: { 
                city: selectedCity || '', // Пустая строка вместо null
                category: selectedCategories.length ? selectedCategories : ''
            },
            beforeSend: function() {
                $('#filterResults').html('<div class="loading">Загрузка...</div>');
            },
            success: function(response) {
                $('#filterResults').html(response);
            },
            error: function(xhr) {
                console.error('Ошибка:', xhr.responseText);
            }
        });
    }
});

Изменения в аяксе:

// Обработка фильтров
$sql = "SELECT * FROM articles WHERE 1=1";

// Фильтр по городу
if (!empty($_POST['city'])) {
    $city_id = (int)$_POST['city'];
    $sql .= " AND city_id = {$city_id}";
}

// Фильтр по категориям (LIKE-версия)
if (!empty($_POST['category']) && is_array($_POST['category'])) {
    $conditions = [];
    foreach ($_POST['category'] as $cat) {
        $safe_cat = mysqli_real_escape_string($conn, $cat);
        $conditions[] = "p_categories LIKE '%{$safe_cat}%'";
    }
    if (!empty($conditions)) {
        $sql .= " AND (" . implode(" OR ", $conditions) . ")";
    }
}

// Выполнение запроса...

[Irinka95]

catch-a-chalk, благодарю, потестирую ради интереса

[Irinka95]

catch-a-chalk, внесла небольшие правки в серверной части, шикарно работает данный метод, спасибо

[catch-a-chalk]

Irinka95, желаю удачи! :)

[Irinka95]

catch-a-chalk, благодарю, Вам тоже!