Страницы

Поиск по вопросам

четверг, 13 декабря 2018 г.

Как сделать селектор с привязкой к файлу PHP?

Здравствуйте, как сделать селектор. Чтобы сначала был выбор стран, к стране были прикреплены определенные города. Далее при выборе города открывалось содержимое файла php привязанное к данному городу. Нужен полный цикл. Я могу не правильно объяснить, но вот для наглядности вопроса сделал видео, что я имею ввиду в вопросе https://www.youtube.com/watch?v=fSxKDltA9-E может оно поможет раскрыть вопрос. Спасибо заранее за вашу помощь, с уважением.
Нужно типо такого http://codepen.io/ajaxray/pen/oBPbQe Но после последнего действия чтобы высвечивалось содержимое файла привязанного к городу.


Ответ

Подгружайте данные через AJAX. Если Вы имеете ввиду что-то, подобное поиску городов в VK, но там реализовано через AJAX запрос в БД.
Если же хотите брать из файла, то вешаете обработчик на изменение селектора страны. При его срабатывании делаете запрос в AJAX к PHP-файлу со списками городов (там выбираете нужную страну и отправляете список городов этой страны в ответе). В клиенте при получении ответа от сервера вставляете этот список в селектор с городами.
По брать из файла не самая лучшая идея, т.к. при хорошей детализации городов будет много. Вносите все геоданные в базу.
Шаг 1
Например, делаем AJAX-запрос через JQuery, где call.php - скрипт, который будет выдавать нам список городов, а data - это то, что мы передаем в PHP-скрипт (в данном случае требуется передать id страны, берем из селектора country_id). Пишем соответствующую функцию:
function getCities() { var data = { country_id: document.getElementById('country_id').value }; $.post('/call.php', { data: data }, function(result) { ... }); }
Шаг 2
В PHP-файле выбираем нужный нам массив со списком городов (на основе данных data):
$country_id = isset($_POST['data']['country_id']) ? $_POST['data']['country_id'] : NULL; ... if ($country_id == 1) $result = array(array('city_id'=>'1', 'city_name'=>'Москва'), array('city_id'=>'2', 'city_name'=>'Санкт-Петербург')); else if ($country_id == 2) $result = array(array('city_id'=>'1', 'city_name'=>'Нью-Йорк'), array('city_id'=>'2', 'city_name'=>'Сан-Франциско')); ... echo json_encode($result, true); exit();
Шаг 3
Далее возвращаемся в наш клиент и после получения ответа от сервера парсим полученный JSON-массив, собираем html-код селектора и обновляем DOM.
$.post('/call.php', { data: data }, function(result) { result = JSON.parse(result); ... var html = ''; result.forEach(function(data, index) { html += ''; }); document.getElementById('city_id').innerHTML = html; });
Где document.getElementById('city_id') - наш селектор со списком городов, city_id - передаваемый в массиве айдишник города, а city_name - соответственно название города.
Шаг 4
В самом HTML уже должен быть код селекторов стран и городов. Селектор country_id статичный, селектор city_id собирается динамически в зависимости от выбора страны. Не забываем повесить на селектор country_id обработчик, который будет вызывать нашу JS-функцию с AJAX-запросом. А на селектор с выбором города (city_id) вешаем обработчик, который будет вызывать функцию открытия нужного файла.


Шаг 5
В функции openFile() прописываем пути к файлам, которые будут открываться в зависимости от выбора города.
function openFile() { // vars var country_id = document.getElementById('country_id').value; var city_id = document.getElementById('city_id').value; // locations if (country_id == 1 && city_id == 1) window.location = 'https://aviareysi.ru/moscow.php'; else if (country_id == 1 && city_id == 2) window.location = 'https://aviareysi.ru/peterburg.php'; }
Если городов достаточно много, то можно засунуть это в AJAX, но в самом простом варианте можно брать напрямую из JS-файла.

Комментариев нет:

Отправить комментарий