Здравствуйте, как сделать селектор. Чтобы сначала был выбор стран, к стране были прикреплены определенные города. Далее при выборе города открывалось содержимое файла 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-файла.
Комментариев нет:
Отправить комментарий